I would like to draw a rectangle with the mouse and after that be able to edit it is a quadrilateral (polygon) by dragging the corners (to be clear about editing, I found a similar behavior on Konva.js: https://codesandbox.io/s/oxwx9q9ko6 and Fabric.js - click the "Toggle editing polygon" button: http://fabricjs.com/custom-controls-polygon)
I didn't find a ready-made solution and decided implement it myself.
And I have 2 options how to do it:
I can use Rect for drawing, after convert Rect to Line by points and continue to work with shape like as Line, as in the example: https://codesandbox.io/s/oxwx9q9ko6
I can use Line for draw and edit corners like in the example above: https://codesandbox.io/s/oxwx9q9ko6
But in this case, I have to implement the drawing of the rectangle myself, like as Rect
Could you help me with these 2 options and share your opinion and experience?
Maybe I can implement it in simpler way (with Transformer, for example) and I don't know about it.
P.S. I have a React web application and plan to use the react-konva package
Thank you!
Related
I am creating a diagram creation tool for constructing flowchart using mxGraph, with the dynamictoolbar.html as a base template. So far, I have been able to add in the images of all the shapes in the toolbar and have it draggable across the graph. The shapes are as follows: Ellipses, Hexagon, Rectangle, and Diamond. The only issue I found is implementing the Parallelogram shape.
I tried this code so far:
addVertex('editors/images/parallelogram.gif', 40, 40, 'shape=parallelogram');
But to no avail
I later found out after opening the diagrameditor.xml that mxGraph has no parallelogram shape. The closest shape was Rhombus, but the user has to rotate it and make it larger to make it look like a parallelogram, which is inadvisable.
Please someone suggest me how to accomplish this.
I am making a very simple designing tool using svg.js and svg.draw.js, in which user make a simple design using line, polylines, rectangles and free hand drawing as well. svg.draw.js is an extension of svg.js which allows to draw elements with your mouse.
Now lets take a look at very simple example. If we want to make any shape (such as polyline) using svg.js, we simply do like this:
var draw = SVG('drawing').size(300, 300)
draw.polyline('0,0 100,50 50,100').fill('none').stroke({color:'blue'})
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.js"></script>
<div id="drawing">
</div>
To draw this polyline by mouse, i used svg.draw.js. Its very easy, we only have to include draw() function of this extension at the end of the above snippet. Also, we dont have to give any argument in the draw.polyline() function as well.
var draw = SVG('drawing').size(300, 300);
draw.polyline().fill('none').stroke({color:'blue'}).draw()
By including svg.draw.js library and draw() function at the end you will be able to create a polyline by mouse. For demo goto this link.
PROBLEM: Now you see that by adding draw() we can create all the svg elements by mouse clicks. By using same tactic, i want to do free hand drawing. I am using path svg element for it but it doesnot work for me.
draw.path().stroke({color:'blue'}).draw()
The above line is giving this error:
If svg.draw.js is supporting rectangles (draw.rect()), polylines(draw.polyline()) etc then why not paths? I want to create something like this, but this free hand drawing snippet is in d3.js
and i want to do it using svg.draw.js. Any help will be much appreciated.
You can only draw lines, rectangle or circle etc. through mouse as you mentioned using this library. svg.draw.js don't have anything like Draw.path().
I want to create a mapper (like mindmapping) with KineticJS and JQuery. But I didn't find how to begin with KineticJS. Actually, I only need some example to draw a box (some shape) in the middle of the page with just one arrow.
Any help will be appreciated.
You can do arrows with paths :
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/
You can also do that with polygons :
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-polygon-tutorial/
And to draw a box, you simply have to draw a rect :
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rect-tutorial/
The KineticJS documentation and tutorials are very simple to use.
Hope it will help.
I'm looking for a javascript charting library which would allow me to build an area chart with an ability to hover the portion between the two adjoining points on the graph curve. Basically like this:
Also as seen on this sample it would be really nice to smooth out the lines between points (use bezier curves instead regular straight lines).
Any help deeply appreciated.
Like #Duniyandn suggested, you can create two series and create rules about what to do with them on mouse interaction.
If you wanted a static section of red you could do it like this. e.g. http://jsfiddle.net/qXbsu/
But if you we're trying to have the highlighted section move with the mouse you could do something like this: http://jsfiddle.net/VuePw/2/#run though the matching of the smooth curves wouldn't be possible.
I use the tooltip formatter function to accomplish both of these because it's an easy proxy for a mousemove callback, not because it's the best way to do it.
I have a full screen canvas I am drawing to, and I've set it up to allow the user to drag and drop objects that are within the canvas.
I also want to enable them to select an object, and then 'resize handlers' show up (the little circles in the corners) to allow them to click/drag and resize them.
I can code this manually by drawing circles in each corner and detect a click, etc.... but was wondering if anyone has any better way to do this? Maybe there's a library out there that already handles this?
Any help is appreciated!
There isn't any simpler way than doing it yourself or getting a library to do it for you.
I wrote a tutorial here on the use of sizing handles. That should get you started if you plan to make your own.