I'm making a drawing tool using Paper JS. Now I want to fill a closed path from two items, say for example two rectangles that intersects.
Looking at the reference there seems to be a function to get the intersections but does not accomplish what I need as it makes another shape out of the intersection.
intersect(item) or subtract(item)
Also in this scenario where it detects if the object is split.
If any of you guys have come across this issue please give some advice.
Thanks and regards.
There is a nice demo of boolean operations in the paper.js examples.
Use Path.unite(), Path.intersect() (and not Path.intersects()), Path.subtract(), Path.exclude() to compute boolean operations.
You can also use Path.getIntersections() or maybe the more appropriate Path.getCrossings() to handle intersections with opened path.
Related
I created a simple graphic with LibreOffice:
The lines are not symmetric.
I am very lazy and a bit autistic. Moving the lines with the mouse does not feel correct for me. I is very unlikely that I will find the matching position for all six lines of this picture.
I would like to code it.
AFAIK there are several ways. You could use dot or JavaScript.
A pure JS solution would be enough, I don't need to create a SVG/PNG/JPG.
How could this be done with dot or JS?
Even in LibreOffice you can use grid. Please see this answer
You could use this library to paint the boxes: http://paperjs.org/
I use canvas in Qml. How do I draw the following shape using canvas? What else can I do if it is not possible with the canvas? (It will be an animation.)
Start state:
End state:
Thanks.
I am not sure to understand what you really want, but I will try to answer.
First, I think you can do it all using Canvas. But it is very greedy, so if you do it for embedded devices, you should avoid Canvas.
Sorted by efficiency, here's how you can draw complex form :
[C++] Create class derived from QQuickItem and override QQuickItem::updatePaintNode()
[C++] Create class derived from QQuickPaintedItem and override QQuickPaintedItem::paint()
[QML] Create Canvas-based item
Also, if you have all the images (meaning every step needed for the animation) and have plenty of power, you could use it directly, using QPixmap, QGraphicsScene [C++], or Images [QML].
In any case, I advice you to edit you question and ask a more accurate question. (Sorry I can't put this in the comment section my reputation is bellow 50).
I have a 10x10 grid filled with objects in certain coordinates and I have a character that needs to get from the start to finish but I would like to avoid the certain coordinates on the route to the finish. Could someone please tell what would be the best way of approaching this in Javascript.
Also, if I was to initialise an array with the obstacles in an array how would I best code this to avoid those certain plots.
Thank you.
Sounds like you're looking for a pathfinding algorithm. The only one that comes to mind is A-Star, or "A*". The short version is that it recursively picks a random "next node" from the nodes it hasn't checked, being more likely to pick nodes that are physically closer to the goal. This is a commonly-used function that you may want to find a tutorial for (it doesn't have to be a JavaScript tutorial as long as you can reuse the concepts in JavaScript)
I asked another version of this question on the gamedev.SE site earlier today but figured I could get better answers here. Also reformulated the question some. I hope this is okay couldn't find anything prohibiting it in the FAQ
I'm playing around with making a puzzle game, haven't done that much before I run into my first problem.
Question a) Basically, I want to create a certain amount of the same object/function (a ball). But the objects will be created dynamically (since the amount of balls could range from 3 to 25), preferably with a for loop pushing the different balls to an array.
However I'm not experienced enough to figure out a good way to do this.
Also, once I have my array of balls on the canvas, I want to be able to select one of the balls.
Question b) How do I know/determine which ball in the array was clicked?
Is a simple for loop enough and accessing the objects with [i]?
I made a jsFiddle example of what I want with 1 ball (you need to click the orange ball to select, then you can move it around by clicking anywhere on the canvas).
This is what I want to do, but with more balls, and the amount of balls is not specified (deciding the amount part i got covered). How could I solve this in a easy way?
Help appreciated.
Using a for loop is fine for your object generation.
As for detecting when you click an object in the canvas, this tutorial might help. It appears there is no built-in feature for tracking objects in your canvas - you simply do manual hit detection based on the common pixels under your mouse and object
Hope that helps
Paper.js has great DOM model, and out of the box ability to click and select items
http://paperjs.org/tutorials/project-items/transforming-items/
hit testing:
http://paperjs.org/examples/hit-testing/
I have looked at a lot of Q/A here on SO regarding similar (if not the same) question I have. Yet none had an answer I was able to understand.
I wish to input a series of GPS coordinates, and create a smooth curve that connects them all, and passes through ALL of them. Javascript is my preferred language and I have found this page
http://jsdraw2d.jsfiction.com/demo/curvesbezier.htm
It allows you to plot any number of points and when clicking the 'Draw Curve' button it does exactly what I want (except it is on html5 canvas whereas I want to use lat/lon values)
You can download the jsDraw2D source code here:
http://jsdraw2d.jsfiction.com/download.htm
The function in question is drawCurve() and it appears to calculate the points of the curve, creating a separate 'div' for each point as it goes along, while also appending them to the html page. I am presuming I need to get rid of the code for creating the html divs and instead add each point as it is calculated to an array or string. However, it is simply over my head (perhaps because it seems overwhelming and my understanding is not quite spot on).
I would post the code here, but it is pretty long, plus I am not sure how many other functions it calls/requires from the rest of the script.
The only other thing I can think of that needs to be considered is the +/- values in GPS coordinates. I am hoping that altitude changes would not effect the smooth line created too much, especially since it seems to create the new points so close together.
Any help in modifying that code would be greatly appreciated. If someone has some other approach, I am open to suggestions - however I would prefer a way that passes through ALL the input points (unlike some mathematical curve functions that do not)
Thanks!