Need to publish simple, two-dimensional technical drawings on the web, such as the ones on this page?
Infuriated how hard that can be with common CAD tools? I was.
Below are some examples. Source is at gitlab.com/draftingjs.
Here is the code:
<script src="js/drafting.js"></script> <script src="examples/simple.drafting.js"></script>
This code creates an instance of
DjsDiagram with defaults, and specifies
which elements (here: two) to include in the diagram. We have a rectangle,
and a label for the part. The coordinates and sizes for all are defined with
a straightforward "Point" class and some suitable operations on it
to make it easy to use.
I bet you can write this file faster than it takes some CAD tools to just come up.
Parts are not very useful without dimensions. If you want to cut this part in the garage, you better know how big it needs to be. So let's add the right measures to the code above. We get:
There's not much to explain: two elements of type
have been added at the points whose distance they measure. DraftingJS automatically
calculates that distance, and creates the lines, arrow heads and labels. If you
don't like where they are placed, you can override the location.
Yes, this works in any direction, not just horizontal or vertical.
Note that if you parameterize your diagram by using variables, all your distance labels will automatically update when variables change.
For this more complex part, we add some HTML5 custom attributes to the
tag to specify units, display size etc. instead of using the defaults as we did above.
Here is the code in the HTML file:
<script src="js/drafting.js"></script> <script src="examples/arm.drafting.js" data-scale="800/10" data-width="1000" data-height="600" data-origin-offset-x="80" data-rounding="2" data-unit='"'></script>
And here is the diagram, in-lined again. DraftingJS lets you use some version of Turtle Graphics to define an irregular part. As you can see, you can mix straight lines and curves.
Not very hard, is it? :-)
To use, easiest might be to clone this repo. All you need is files js/drafting.js and assets/drafting.css. Pull requests welcome!