Transform / move one end of a path - javascript

As a simplification of my code I have a number of svg rectangles. Each of these are connected to one another with a svg path or curve.
The user can drag the rectangles. The code does this by applying a transform matrix to each rectangle.
Now I would like the path to adjust dynamically when a rectangle moves. Ie The end of the path connected to the moving rectangle also moves.
Is there some way I can apply a transform to one end of the path ?
Previously I have just redrawn the curves on mouse move events but in my more complicated code that gets awkward so I was wondering if there was a simpler svg feature.
Thanks

No. There is no way to do that in the general case. You need to modify the path.
The exception, of course, would be the very specific case where you were dragging the rectangle vertically or horizontally, where you could perhaps get away with scaling the path in one direction.

Related

How to fill an SVG path with circles?

I have a path (green in the image below), and I need to fill it with a dynamic number of circles.
For example I know from the start that the most circles a path can contain is 500, and as a JS script runs in a browser, I will need to display 300 circles inside the path. It doesn't matter how the circles are arranged, just that they are inside the path. How do I calculate the positions inside the path with a little bit of padding between each circle?
I've been thinking of getBBox of the path, generating a grid inside it, then checking each X,Y position with isPointInFill, but this only checks the center of the circle and ones on the edge will overflow the path.
Is there any library that can do the heavy lifting for this situation? Or otherwise how would you accomplish this?

Efficient way to find point on a svg stroke closest to the current mouse point?

As user moves mouse cursor near the strokes of svg path I would like to display a circle on a stroke at the point closest to current mouse point. The only solution comes to mind is to manually parse SVG data and find closest point checking all segments of the path. Implementation of this is quite involving and potentially too slow.
I could draw transparent stroke on top of current stroke with larger width and use SVG hit testing capabilities to detect that point is close to the stroke but is there any way to determine corresponding 'central' point of the stroke?
Interesting, but too involving problem to be solved here.
You will probably need to do some calculations on your own. You might find method getPointAtLength to be useful. If you are comfortable of using some library like D3, you can find some helping functions there as well. I think very good approach to solve this is to segment your path and use Voronoi tessellation. You can find the code and demo here:
https://bl.ocks.org/mbostock/8027835

Image registration (aligning one image to match another)

Currently I have an image that needs to be manipulated so it matches the same scale, position, and rotation as a template.
The grey rectangle with a circle in the middle is the template.
The orange rectangle and circle represents the user's input. It needs to be rotated, scaled and aligned to it matches the grey one. I'm currently stumped on how to proceed. I've no code other than the following.
function align_image()
{
// clever transform alignment code here
}
Bad dog, no biscuit!
The process at of aligning the images would normally be done manual input and judged by eye. I'm hoping to automate this step and align the image to its respective size and position but leaving the comfort and safety of Photoshop DOM I'm not sure how to proceed or even if this is a trivial matter or one left best alone. The project is web based currently using javascript and three.js
So if anyone can give me some pointers I'd appreciated it.
I don't code javascript so I can only talk about the algorithm. Generally best tool for registration is to use feature matching methods (using sift, surf,...) but your image is not the kind that have strong features. Now if you're always dealing with rectangles and circles in your images, find the "edges" of the rectangle with Hough Transform, compute the angle of those edges (lines) then rotate the image with that angle in the opposite direction.
Then with the help of Hough Circle Detector, find the center of the circles in the middle of the images, calculate the distance between them, and move the target rectangle to the source's circle position. After the movement by comparing the radius of the circles, you can resize the target image to make it like the source rectangle.
All of these are conveniently doable with Opencv.

Rotate a resized rectangle with SVG and Javascript

I'm using d3js and SVG to resize and rotate rectangles, I capture the mouse events on handles that are positioned in each corner of the rectangle, there are two handles in each corner, one for resizing (square) and other to rotate (circle).
When I do the following process, the rectangle "jumps" from its location to another one:
Rotate (it means it's not more in zero degrees)
Resize (any direction)
Rotate again (here is when the shape "jumps")
The jump only occurs when the center of the rectangle is updated, using transform rotate from SVG.
One thing that gave me a lead was updating the rotation center while the shape is being resized, when I do this the shape starts to move to the final position where the "jump" would have placed it.
I can post code examples, it will take some time to do, but if helps to see the problem, no problems.
All I need is some direction from someone that already had this problem.
Edit:
I've made a Plunker with somewhat the current structure that I'm using in my project. All events controls are concentrated in the svgApp.directive.js.
Things I've noticed while developing this example:
The center of the element is not correctly calculated after the angle is not zero, this is my main issue;
If you apply the {{vm.model.image.transform.rotate}} to the ng-attr-transform attribute in the center <circle> element, you are going to notice how it always is in the correct center (the right circle - blue - is commented at the bottom of the main SVG);
I know this is not the perfect version of the tool, it still has some bugs, like the inversion of the mouse direction (resize/rotate handles) while rotated, but it's well documented and structured very close to how I'm working on the project.
The Plnkr: http://plnkr.co/edit/fXT0kZcRwJTPb7wQVHpg?p=preview
Any help with this problem will be very appreciated.

Detecting wether a point is inside or outside of a raphael.js shape

I have a raphael.js shape which I am plotting circle's on top of. I only want a circle to appear if the circle does not go off the boundary of the shape it is being plotted on to.
To make this more clear, here is an example of what I do not want to happen:
Example http://img682.imageshack.us/img682/4168/shapeh.png
I want the circles outside of the grey area not to appear. How would I detect wether a circle is inside or outside of the grey shape?
One possible way to dertermine if a point is inside closed path is this:
Choose coordinates that are definitely outside the shape.
Make a line from that point to your actual point in question.
Count, how often the line intersects with the path.
if the number of intersections is odd, then your point is inside. If it's even, the point is outside.
I don't know if that help you very much since I don't know raphael.js at all. But it's a working geometrical approach to the problem.
You could just apply a clip-path (that should be defined to be the grey shape you have in your example) on a group (<g> element) containing the circles.
See this example from the w3c SVG testsuite for how to use clip-paths.
This looks very similar to "Hit-testing SVG shapes?".
You'll just need to call getIntersectionList() on the circle's position, and see if it returns the big gray shape.

Categories