With 3 points, I am trying to achieve: rotate, move and resize after grouping them to any Path.
Path can be any regular polygon shape.
So far it is rotating and moving well smoothly. However it fails on resizing.
Here is the sketch.
Can someone guide or correct?
Note: the sketch was updated to move when shape is also dragged.
The key is to use the point argument of the item.scale() method.
It allows scaling the item around a custom point and not around its center, which is the default behavior.
You also have to cancel the group dragging when the scaling operation is active, like you already do with the rotation.
Here is a sketch demonstrating a simplified solution to your problem (only handles uniform scaling) that should get you on the track.
Related
Sketch link
I want to smooth out the subtraction of these two spheres, as seen in the sketch. I expected smoothing via the continuous type to remove the pointy edges of the sphere, but this didn't happen. If you change the position of the second circle to a number greater than 100 (circle v), then the smoothing works correctly. How can I solve this?
The smooth function will try to remain course to the original curve, that often means keep some corners.
Instead, you can add some handles to your corner points. That way you will have a good control on the curvature of your drawing.
I'm trying to create a small website using the FabricJS library, which adds additional features to the web canvas element.
My issue that I, however, have is that i want to resize the canvas (in red) so that it fills the whole webpage.
On this canvas, there is a background image (in green) where I'll create some drawings on (in orange, this could be lines, squares,...).
Now, I would like to export all drawings in a coordinate system relative to the image and not to the whole canvas, because it should be possible to freely move around and zoom in/out the image for an enhanced drawing experience.
My idea, on how to solve this, would be to calculate the image position relative to the canvas and subtract them from the drawings - but that includes a lot of calculation.. Maybe there is a more genius approach with FabricJS?
Moreover, how can i guarantee that my drawings move around and zoom in/out with the image, so that my drawings are always true to the image?
I've thought about this for days and came to the realization that i need input from the professionals.
I think toLocalPoint() might help. Given an object imageObj and absolute coordinates left and top of your drawing, you can find the relative coordinates like this:
const abs = new fabric.Point(left, top)
const rel = imageObj.toLocalPoint(point, 'left', 'top')
console.log(rel.x, rel.y)
As for your second question: there is no easy way to "tie" two objects together, other than grouping them - and I assume you don't want to group them. Therefore, you would need to listen to all the appropriate events emitted by one object and make the adjustments to the other object in their handlers. To find out what events make sense to listen to in your case, see the events demo.
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.
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.
I'm my current project I need to draw robots and move them around.
A robot is composed of a circle and a box which shows the current orientation of the robot.
My problem is that I when I animate them, the orientation box moves in a strange way because of its rotation...
Here's what I mean: http://jsfiddle.net/zmunB/
Thanks for your help.
Balzard.
This fiddle shows another option. It may not be quite as elegant as rajkamal's solution, but it may be easier to understand if you are not used to working with matrices. You should be able to add features to it at will (notice the 'eye' I added).
Basically, I am just adding the features to a set, and applying the transformations to each element in the set. Kick off the animations by clicking the colored squares to the right. Note that 'Move relative' will make the set move in the direction it is 'looking'.
Please refer this fiddle. http://jsfiddle.net/apUvX/2/ , for transformed movements.
Here in "onAnimation" method of circle, we are transforming the circle's center coordinate to the
rectangles coordinate system using Matrix.x,Matrix.y and assigning the result to the the x,y of the rectangle.