I'm having trouble intersecting shapes with SVGs created from typography.
In particular, take the letters o or e, which are each made up of two paths, and outer and an inner.
if I overlay another shape, say a rectangle, the path1.intersect(path2), where path1 is the letter 1 and path 2 is the rectangle, the blue outline shape is returned, not the red outline shape.
https://drive.google.com/file/d/1HGOSr7-BoBqWd7mMrrM6pa2qXRw5w-wF/view?usp=share_link
How can I use paperjs methods to get the red outline space only?
Ideas:
In the boolean operations example, the ring is created by subtracting the inner from the outer. should I loop through my SVG CompoundPath and figure out which path is inner, subtract that from the outer, then remove the inner? I have about 6 enclosed letters in the text I want to use. This seems feasible though cumbersome. Is there a better way perhaps?
Thank you
Related
In a paper.js project, I have two points A and B, that lie on a simple shape. This shape can be a circle, a line, an ellipse, a rectangle, etc. I need to highlight the points that lie on the shape from point A to point B.
For example, if I was given the triangle below, and the points A and B, I want to high the line AB as shown in the diagram.
image of a triangle drawn in black with line AB highlighted in purple
I would like to understand how to implement this. Of course I can do it the brute force way by tracing tangent points, but that will be slow. I was wondering if there's a better way to do this.
I tried to give each rectangle a different color but unfortunately it did not work
I want the horizontal distance between those two rectangles to be zero
Here is what I want:
And here is the code and result: http://www.plantuml.com/plantuml/uml/rP9FIyD04CNl-ocMUXEAIMn198PYeE1PZu9iacawT3CRPgSjMlpkhfiISoXuyEISNjuly-V1hhmObdrdbTyXzOPDfviUzI999exVciOTaLgzCTR3X5IcthNizjJKpZhMmePyG42YrEG_XbeCjHRqIUbGiQLqJC0wNKRhMO31oNiFQqTInd5NbGqB8hveFexhpsWTQs2E6-2pdoJBzAvKwZDSzNFBBFVu0VTPLhoWXEyql_asYbSQG5hacx1MnsmFnoqA54W7z5XPc1-01MjZvo5mZTIEpM-X_ZZYMZy9T3eTLJQgszdfjnpPlyWngiK5jHnIhe2Qy3g_0000
but the most important thing to set the horizontal distance between these two rectangle to zero
It's not possible to do a 0 horizontal distance between two rectangles in PlantUML. You could do a table in Creole, but it won't look like your example, since the lines (rows) would be aligned in a table.
When I see your usage, I think you'd be better off using DOT (GraphViz). You can wrap DOT code in #startdot/#enddot in a PlantUML engine and it will draw the diagram. For example:
https://www.plantuml.com/plantuml/uml/TP1HIyCm58NVyol2_GDJvfj9MDkK8PIbn88FOm_PShN5q9OqeY3-TvDfApBMXzwSd2_dmDrCmVXWXq1iz-BDsD8f-BTJcEWdeV7h1ujqFxLcH3uwq_K1Fy8XMR_WckwTEQBZZB0cowkIvahBKdEu0LgKLJNBsn_vM6V5mswxs7KcvLdV0SstXQfKP7KfGSGIrkWqqa5IhPxYuns7DOWMdHjOhbVYVV3EibKZ_y0Oie37sOfJNqGkXMFNlu8udU5ar4et75hq2CBEjmAlX5tMFlydup-jHeZ3FVaY6-njtFWt
But, since you're writing lower-level DOT, you need to use that syntax to lay everything out. There is much more control, but it's no longer PlantUML.
Given a number of points on a 2d surface and radiuses for these points I can easily paint circles for them. What I need is an algorithm that only paints the envelope (right word for what I am looking for?) or outer bound of these combined circles. Additionally a second set of circles can 'encroach' on these circles, resulting in a kind of 'border'.
Image of what I am looking for
A quick way to draw the outline of the union of the disks is to
fill all disks in yellow, then
fill all disks in white with a smaller radius.
This can be adapted to the "encroached" circles, provided you only fill the remaining portions of the disks. Unfortunately, in a general setting finding the remaining portions can be an uneasy geometric problem.
There is an alternative approach which can work in all cases:
fill an image with zeroes, then for all disks fill every pixel with the value of the distance to the circumference (maximum at the center), but only keep the highest value so far.
while you do this, fill a second image with the color of the disk that achieved that highest value. (Initialize the image with the background color.)
At the end of this process, the first image will represent a "terrain" made of intersecting cones; and for every point of the terrain, you will know the color.
finally, color the pixels that have a height smaller than the desired stroke width, using the color map.
You can do the drawing in two steps.
1) Draw the outline using the following method: For each point, draw a circle using your favorite circle-drawing method, but before drawing a pixel, ensure that it is not contained inside any other circle. Do this for every point and you will get your outline.
2) Draw the borders between different sets using the following method: For each pair of points from different sets, calculate the two intersection points of the circles. If there is an intersection, the border can be drawn as a segment joining these two points. However, you have to make two lines, one for circle A, and another for circle B. To draw the line for circle A, slightly offset the segment towards point A. Then, use your favorite line-drawing method, but before drawing a pixel, ensure that it is closer to point A that any other point of the opposite set. After drawing the line, repeat the process for circle B. Note that both segment are not guaranteed to be the same length since the asymmetry of the points of the different sets. It will, however, always form a closed shape when all outlines and borders are drawn.
I'm doing a triangle rasteriser and it all works but now I want to use parallel computing to draw a bunch of triangles.
This means that the triangles can be drawn in any random order each frame, the problem is this disordered drawing is causing artifacts.
As a test case, let's consider two triangles that share two vertices, like so:
If we look at a grid of pixels the vertices will look like this:
The filling convention I'm using is just ceil()
So if we draw the blue triangle it will look like this
The problem that now becomes apparent is that if we now draw the yellow triangle, because they share the two vertices, the yellow triangle will be drawn over the blue one:
This isn't a problem on it's own, the problem is IF we draw them in the reverse order (yellow first, blue second) then the blue one will be drawn over instead:
This causes obvious artifacts because in any frame the order can be random so you will see a flickering line as one triangle is drawn over another and vise versa.
Is there any thing that can be done to ensure that the final image will look identical no matter the order the triangles are drawn in?
Always truncate to integer device pixels, and always do it the same way. This could be floor or ceiling or even rounding (if your sure both triangles get numerically identical inputs then they should round the same).
And define the boundaries of the triangle to include the lowest endpoint but exclude the highest, ie., min(x0,x1) <= x < max(x0,x1) and similarly for the y range.
I have brown filled svg paths and i want to detect and alert my user if there is any shape behind or above another shape. I know intersection list gets if they intersect at the edges but what happens if i want to detect a shape that is behind another shape but doesnt intersect at the edges?
The encoluseList method seems to be dealing with bounding boxes and not this.
Any ideas?
To detect if a path/shape overlaps another
1. Calculating the area covered by the final shape achieved
2. Calculating the sum of areas of all the shapes independently(since this is SVG and the details of each path element is known, this can be done)
3. Comparing the 2 areas.If the 2 areas are the same, then there is no overlapping otherwise at least 2 shapes overlap.
The tricky step is step 1 which can be approximately calculated using pixel painting algorithm(my preference). For other methods, you can go through the following stackoverflow question concerning area of overlapping circles