I'm working on a app that is based on vector data and using various boolean operations. For these boolean operation I'm using a library called clipper. Now I need to make a vector operation which I'm not sure how to do in Clipper. I have a straight line consisting of two points that always have to stay inside a closed polygon. What I mean by this is the following image. The green line is the closed polygon and the red line is the straight line. When the red line is outside the green polygon it needs to follow the contour of the green polygon.
I'm not sure how to archive this. Any suggestion on how to do this with clipper or maybe another library will be very helpful!
I don't know clipper, but I've seen examples of this using "dashed lines" around a vector image.
THe method is very simple, however.
Consider that your line is part of a "dashed line" around the border of the image.
To make it appear it only exists one line, the space between each dash has to be at least equal or greater than full_perimeter - dash_size.
In this example, the movement would be generated with an iteration over the offset where the dash is drawn to make it move around the picture.
I hope this helps, or points you in a way to solve this problem :D
Related
I'm building a canvas paint tool where the use simply drags his mouse to draw on the canvas. As I understand it lines is the best way for the job. So on mouse down I create a KineticJS Line object and when the user drags I add a point between the last mouse position and the current. Note, I only have one line object that has multiple points.
When the user releases his mouse the Line is finished and whenever you click again to draw more, I create a new line object.
Problem with this is that if you are going to draw a text, say "My name is x" That would result in many line objects, 1 for each character (and 2 for "x" and "i").
Is there a better way to do this? My idea was to have only one line object, and onmousedown you simply not add a line from the previous position, and then when u drag you do. But I don't think KineticJS Line supports that.
So basically, can I improve the way I let the user draw?
Your current design of having 1-2 polylines that define one letter is fine.
Both canvas and Kinetic can support a whole paragraph of characters before lagging in performance.
If you want 1 single definition for a whole sentence, you can use a custom Kinetic.Shape.
With Shape, you get full access to a wrapped canvas context. You could use that context to do your second idea--a single context.path drawing a sentence through a saved set of moveTo and lineTo commands.
Personally I would go with your current design (1-2 polylines per character) because the performance is fine and you get more flexibility. (For example, if you want to draw the person's name in a different color is easier in your current design).
I am currently learning to use canvas, and do not understand the difference between these two functions. From what I have read, the translate method 'moves the canvas'? Can someone explain this?
Edit: Is moveTo only used within the context of a path?
To be a little more specific than Kolink, since I think the explanation is a little muddy;
-The coordinate you pass moveTo is the starting point of a new line (or shape); As if picking up your pen off the paper and setting it in a new location (the new coordinates).
-The function of lineTo is what "move(s) the pen across the paper to draw a line" (to a new coordinate you've given it, since you need two points to draw a line, obviously)
-You can place multiple lineTo calls one after another and it will use the last point you ended on, to continue the line, like so:
ctx.moveTo(100,50);
ctx.lineTo(25,175);
ctx.lineTo(175,175);
ctx.lineTo(100,50);
ctx.stroke();
here's a simple fiddle showing the outcome: http://jsfiddle.net/fbZKu/
(you can even "fill" these shapes you make with ctx.fill()!)
-The use of translate is to move the canvas' (0,0) coordinate (upper left corner) to the new coordinate.
I hope that clears things up a bit more! Happy coding! :)
Imagine you are drawing on graph paper.
moveTo means you take your pen and move it across the paper to draw a line.
translate means you shift the position of the paper on the table.
They could not be more different functions.
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'm completely new to canvas and animating objects with it. I did a little bit of research (e.g. I found RaphaelJS) however I couldn't find any general answer or tutorial on how to create a "morphing" circle.
The image I posted here is what I would like to do:
I'd like to create one circle that is endlessly animated via a randomizer and is slightly morphing its contours.
I know this might be not a "real" question for this forum, however I just wonder if anyone could provide a few tipps or tricks on how to do something like that.
By "how to do something like that" I'm speaking actually about the technique on how to morph a circle. Do I have to "mathematically" create a circle with dozens of anchor-points along the edge that are influenced by a randomized function?
I would really appreciate some starting help with this.
Thank you in advance.
A circle can be reasonably well approximated by 4 cubic curves (one for each quarter and the control points on the tangents - google for the correct length of the control segments or calculate them yourself - see here. You could then randomly animate the control points within a small radius to get a wobbling effect.
Do I have to "mathematically" create a circle with dozens of anchor-points along the edge that are influenced by a randomized function?
Yes, you do, although it should not be necessary to create "dozens".
You may find the .bezierCurveTo() and .quadraticCurveTo() functions useful to provide smooth interpolated curves between control points.
When you can use a raster image then for every point you can displace it along the x-axis with a sin function. You can run the same function along the y-axis but instead to simply displace the pixel you can double it. This should give you a morphing circle but it also works with other shapes.
I googled it but didn't find a good answer. Specifically, I want to learn:
to slice an image into curved pieces
to create individual objects from those pieces (i assume that i need
this to reassemble)
thanks.
There are several pieces to this puzzle. :)
The first piece is SVG and its Canvas. That's what you'll need to draw, because otherwise you can't make a curved piece out of a picture. Only rectangles are possible with standard HTML/CSS.
The second piece is an algorithm for generating jigsaw pieces from the picture. Google should help you with that if you can't figure one out by yourself (though it doesn't seem very complicated).
The rest should be straightforward.
Added: A quick Google search gave just such a jigsaw engine in the first result. Check out the source of that.
I'll assume the image you want to saw to pieces is a raster image with a resolution that you will use for the puzzle pieces, call that /picture/. Also, I assume you have the edges along which you wish to saw in a second raster image with the same dimensions, call that /raster/. Then your problem amounts to determining all connected areas in the raster. Each pixel of the raster gets annotated with the id of the jigsaw piece it belongs to, initially 'none', -1 or whatever. Then your algorithm scans across all pixels in the raster, skipping pixels that already belong to a piece. For each unassigned piece it executes a flood fill, "coloring" the pixels with the pieces id (e.g. number). In a second scan, after allocating an image for each piece, you add the corresponding pixels of the image to the piece. As part of your first pass you can maintain for each piece id the bounding box. That allows you to allocate the the images for the pieces to their proper dimensions.
You need a suitable convention to deal with border pixels: e.g. border pixels to the right belong to the piece if they have the same x-position, but are above they also belong to the piece.