Rotate a resized rectangle with SVG and Javascript - 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.

Related

How to resize a group of path in PaperJS

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.

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.

D3.js v4 Separate Drag and Zoom/Pan

I have code that draws a square and plots points inside a canvas element. I use a d3.drag function to drag the square separate from the points and a d3.zoom function to zoom on BOTH the points and the square as well as pan both. The problem I'm having is two-fold:
Once zoomed, I sort of lose the ability to drag the square. Sort of in the sense that if you click around enough (typically the original spot of the square, not current), you can grab the square again.
Once I am able to grab the square again, the zoom renders to the very original zoom layer, not the current zoom.
Here is a jsFiddle
I found this answer that recommends adding:
square.on("mousedown", function() { d3.event.stopPropagation(); });
but have not had any luck.
TIA

Canvas: Stop panning at end of image

I'm implementing the ability to zoom-in and pan around my canvas. I'm doing this by having two canvases, one for the drawing and one displaying the viewport. I'm having trouble finding the limit for the clipping region.
Anyway this all works, i'm just setting the scale to some value higher than 1 when zoom-in is called, this has the desired effect.
I'm panning the canvas in the same way you would animate a sprite-sheet, the viewport canvas just acts as the clipping region on-top of the drawing canvas.
I'm stuck with what numbers to set for the boundaries to stop the canvas going too far right and down however.
Here how i'm implementing the pan just for some clarity:
//This only gets called when the canvas is zoomed in.
viewPort.drawImage(canvas,translationX,translationY,viewPort.width,viewPort.height
,0,0,viewPort.width,viewPort.height);
TranslationX starts off at 0 and after every key-press of the right arrow I increment that by some value, I know this should not be some arbitrary number, but for now I've just set it to 4.
Anyway this all works, but it goes off the edge of the canvas, and i'm having trouble working out what the condition should be to stop panning right, here's what I have so far:
if(canvas.width + translationX <= bCanvas.width)
translationX += 4; //Pan right...
Obviously this doesn't work, it pans about 1/5 of the viewport off the canvas edge. I'm now just hacking about with it, just throwing arbitrary numbers into the condition, so thought this would be a good time to ask for some guidance.
Thanks in advance
Edit:
Ok so i've made an image to illustrate the problem incase my explanation was unclear.
The green box represents the image I am panning, the 'canvas' named in the above snippets.
The yellow box represents the clipping region, the 'viewPort' in the above snippet.
The grey area is just represents the rest of the webpage.
So to clarify, i'm confused as to what value to put into the condition to stop the clipping region going off of the canvas.
Thanks again

Animate rotated objects with Raphaƫl.js

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.

Categories