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.
Related
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!
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().
When I create a point using Three.js it looks like a square. How can I make it look round? I saw in the documentation some blending factors but I did not quite understand how to use them on my points and I don't even know whether it is the right way to do it.
One trick I used is to create an SVG circle element, render it to a canvas with canvg, and render that canvas to a texture to use in a point cloud.
By applying gradients on the circle, I can give the illusion of shininess on a 3D sphere with a 2D circle.
There's too much code to post into an answer but I have a project over at Github you can look at, if interested, which demonstrates the idea. See: https://github.com/alexpreynolds/cubemaker and the associated demo at: http://alexpreynolds.github.io/cubemaker/
If you just want circles and no "shiny" effect, you could remove the gradients. Or draw a circle directly to a canvas element and skip SVG altogether.
Alex Reynolds' answer is correct. I add this one to give more details : as far as I know there are two ways to customize your points' look.
As the docs suggets, using textures (THREE.PointsMaterial({map:texture})):
The most intuitive is to use an image of yours :
var texture=THREE.ImageUtils.loadTexture('url-to-my-image');
You can also draw something in a canvas and use it as a texture. This includes raw drawing in the canvas, SVG importing as Alex Reynolds suggests, or any other technique. You can check his link and look for threejs examples. This is particularly used to render 2D text on sprites, you will find more examples with that.
var texture=THREE.Texture(canvas);
Check three.js examples for more details on using textures on Points
Using shaders :
If you know about shaders, you can write a small fragment shader that will result in the lightest and most precise of those solutions.
I have been searching for quite a while but I found nothing, which really helps.
I want to clip an Image with multiple custom shapes.
Is it even possible to clip an image multiple times ?
I want for example three hexagons, which aren't connected to each other and in which the
Image is visible.
Is it possible to clip the image with a custom shape like a hexagon or so ?
I would really appreciate any kind of help !
Thanks
You could use an SVG path as clip-path. See https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content#Example.3A_Clipping for an example.