Im trying to connect two shapes using the path by dragging the mouse from one shape to the other.Is this possible in Rapahael?If some one has already done this a lttle help will be much appreciated.
Im looking to do something like below.I want to be able to drag my mouse from the grey shape to other green shape and connect them using a path
Thanks
i'd approach it like so:
create a set to hold the shapes once they're joined.
assign a drag() handler to the desired element, to push it to the set upon dragging (with certain constrains, obviously - if shapes are intersecting or other conditions).
treat the set (now containing several shapes) as the new shape, as Raphael's set API allows precisely this by providing an opaque interface to the contained shapes inside the set object.
i hope this helps, for any questions or clarifications on this, please comment. i'll try and manifest another approach for a solution, and see if i'd come up with anything.
Related
How can I draw a Bezier Line between two non-static DOM elements, like this:
The two lines should be drawn between the
<div class="brick small">Line starts here</div>
and the
<div class="brick small">Line ends here</div>
of this CodePen: https://codepen.io/anon/pen/XeamWe
Note that the boxes can be dragged. If one of the elements changes its position, the line should be updated accordingly.
If I'm not wrong I can't use a canvas, right? What can I use instead?
Let me point you toward the answer I beleve you're looking for, it's a dom element type called 'SVG' which is supported by most if not all web browsers of today (so you won't need to plug in anything external), in which you can draw lines, shapes, apply graphical filters much like in Photoshop and many other useful things, but the one to be pointed out here is the so called 'path', a shape that can consist of both straight lines with sharp corners, or curved lines (bezier) or both combined.
The easiest way to create such paths is to first draw them in for example Illustrator, save the shape in the SVG format, open that file in a text editor and pretty much just copy the generated markup code and paste it into your html, as it is supported there. This will result in the drawn shape to be displayed on your site. But in your case, you won't come around the a little bit complex structuring of the paths, because you wish to have control of it using javascript, so I would suggest first making a few simple paths in this way by exporting from Illustrator, study these in code, then manipulate their bezier values in javascript until you get the hang of how they work, once you've done that you will be able to create the accurate bezier shape you have in mind and (knowing the positions of the elements you want to connect) position them so that they connect your boxes.
Paths can even be decorated with markers, like an arrowhead in the end or beginning of the path, you can even design your own markers as you like them to look and much more if you would dig deeper into it.
Good luck! :)
In my JavaScript application I have more than 30+ polygons. They are defined like this:
polygons:[
{name:'xx',bounds:[20,20,60,20,50,40,30,10...],minzoom:0,maxzoom:5},
{name:'yy',bounds:[.....],minzoom:6,maxzoom:8},
........
]
Now given a certain point like [10,10] with zoom 4.
Which is the fast way to check which polygon this point is located inside?
My first thought is iterator the polygons, and to check if the point is inside the polygon.
Then this question came to be a point-in-polygon question which have a lot of answers at stackoverflow.
I just wonder if there is any alternative methods?
Assuming the polygons do not overlap (or that if they do, you're only interested in the top-most polygon), you can employ the "point-in-polygon" solution that involves a canvas:
Create a canvas big enough to hold all your polygons.
Draw each polygon in a different colour, one after the other
Look up what colour the pixel is where the point is located
This will tell you the polygon that's there.
Note that you don't even need them to be human-distinguishable colours, you could literally use #000000, #000001, #000002 and so on, and use the colour's hex code as the index of the polygon.
I am developing an editor in html5. I have buttons for creating shapes when clicked, including triangle, rectangle, hexa, penta, heptagons, lines, and so on. Now I also want to perform operations on these shapes such as rotate, flip, undo, redo, ...etc. I want to save these drawn objects in a JavaScript array or something so I can create them after performing operations on the canvas, since individual shapes cannot be rotated or flipped in canvas, we have to redraw it. How can I achieve this? Thanks in advance.
I have a project where if you click on an image of a rectangle you can then draw a rectangle, click on an ellipse then you can draw an ellipse. My shapes are stored as objects which are then drawn using Canvas and can be flipped, rotated etc I have not implemented undo redo.
My project is at http://canvimation.github.com/
The source code for my project is at https://github.com/canvimation/canvimation.github.com
The master branch is the current working code. You are welcome to use any of the code or fork the project.
as you said, you have to clear your context and redraw your shapes any time you change them.
It's not mandatory to clear and redraw all the context, you can just redraw the region in which a shape is modified.
So you have to think your shapes as objects (in a OOP way) with their own properties and render method.
What I'd do is to create another class to apply transformations to a shape (a flip is just a -1 scale).
If you go this way, it could become a huge work (the more features you add, the more complexe your code becomes and the first design of your application may be re-think during the work).
What I can suggest to you is to use a framework that already does the job.
For example, cgSceneGraph is designed to let developers add their own rendering method and provides a lot of methods to manipulate them. I'm the designer of the framework, feel free to ask more on about how to apply transformations or create your own nodes (tutorials and examples are already on the website, but I'll please to help you).
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.
Is it possible to create an arbitrary shape on a web page so we can detect mouse overs/outs on it? It's much like an area map for an image but corresponds to a page (or a div etc) rather than an image.
This might be a non starter altogether as I haven't found any information in this area. Thought I'll just ask here to see if there is any way to achieve this.
My original requirement is to provide an area map for a set of images such that one area corresponds to a list of prearranged images so any points in area can be mapped onto a specific image in that list using that image's position.
Any information will be helpful.
There is the <map> HTML element that allows the definition of geometrical primitives and even polygons.
The <area> elements defining the areas inside the map support standard mouseover and mouseout events.
There are javascript-/jQuery-based extensions to even highlight map areas. See this question for more info.