Add custom control to Fabricjs object - javascript

I want to to add custom control(div) to Fabric js object something like this:
I found this question but it has bug on rotation please see jsfiddle
I'm trying to find solution already few days, any suggestions are welcomed.

http://jsfiddle.net/86bTc/94/
var btnLeft = ((e.target.width / 2) -10 )* cos(angle) + ((e.target.height / 2) +25) * sin(angle);
var btnTop = -((e.target.height / 2) +25 )* cos(angle) + ((e.target.width / 2) -10 ) * sin(angle);
You have to add the rotation effect to LEFT and TOP of your absolute positioned element.
I changed the positioned element with a small div, so you do not get tricked by the baseline of text that makes the 'p' element look in wrong position.

Might be that solution is good for you? Fabric js custom controls

Related

Why does Javascript not perform the expected operation here?

So I am trying to make a website in which I can place these NATO units on a map. It's all been going well so far until I started to work on the zoom function. The goal is to zoom the map canvas by a constant factor of either 2 or 0.5 and all of the units would retain their center position in relation to the map. However, these units will all remain the same size due to the inability to see small units.
I am currently having difficulties understanding why the zoom doesn't currently work. A quick run through the website reveals some major flaws. I suspect it has to do something with these two lines, lines 177 and 178 of the zoom(level) function in draw.js:
draggableElementsA[i].style.top = (draggableElementsA[i].getBoundingClientRect().top + (draggableElementsA[i].getBoundingClientRect().height / 2) - c1) * level - (draggableElementsA[i].getBoundingClientRect().height / 2) + canvas.getBoundingClientRect().top + "px";
draggableElementsA[i].style.left = (draggableElementsA[i].getBoundingClientRect().left + (draggableElementsA[i].getBoundingClientRect().width / 2) - c2) * level - (draggableElementsA[i].getBoundingClientRect().width / 2) + canvas.getBoundingClientRect().left + "px";
The context should be made clear on the actual file. This function performs an odd operation: it moves the units off the screen, far greater than any of the individual measurements. Any help is greatly appreciated!
I believe the issue arises when scrolling while in the zoomed state. Specifically, zooming in, moving an object, and unzooming results in the item being offset.
When recording the XY coordinates, specifically in these two lines:
pos3 = parseInt(e.clientX);
pos4 = parseInt(e.clientY);
record the position relative to the top of the game board, not simply the position of the mouse cursor on the screen.

Animate & orientate object along svg path using snap.svg

I have an animated SVG path
I can attach a polyline to the end of the path which works (commented out in the codepen) but when I attach a custom path the Matrix coordinates disappear below the page.
You can see this in chrome dev tools if you inspect the bottom blue dot and below that there is a
g transform="matrix(0.8351,0.5501
If you swap the first coordinates out with 'M246' the feet element will appear (at the end of the animation).
So everthing is working apart from the coordinate mapping is off
Does anyone have any suggestions, thanks in advance
Michael
**Code Pen**
http://codepen.io/michaelcockle/pen/eBCAv?editors=001
Think you've already spotted an answer, but you need to account for the transform baked into the path itself, so
meFeet.transform( 't' + parseInt(movePoint.x - 260) + ',' + parseInt( movePoint.y - 1750) + 'r' + (movePoint.alpha - 90));
example here

js canvas gradual zoom?

I've been working on a simulation that's pretty bloody huge, which meant it became necesary to zoom in and out.
I found a good working script but when the simulation got bigger I found it had a problem...
The more you zoom in, the smaller the steps became and the further you zoom out, the bigger.
This is a problem because I need the steps to be equal no matter what zoom level you are.
The script I'm using now is:
var total = 75,
delta = e.detail ? e.detail * -120 : e.wheelDelta; //e is mouse event
this.zoomValue += (delta > 0) ? 1 : -1;
this.zoomRatio = 1 + (this.zoomValue / total) * 2;
e.preventDefault();
You can see it in action here: http://clanpvp.com/sol (if it's not working, I'm either fiddling with it or you are using Internet Explorer)
I use the zoomRatio later to calculate the positions of various objects.
Who knows of a better way to zoom in?
The anwser is very simple actualy... yet I needed somebody to show me before I saw it myself.
The solution is to have it zoom exponentialy, so
this.zoomRatio = Math.exp(this.zoomValue);
Does the trick, you can do something like
this.zoomRatio = Math.exp(this.zoomValue / 10);
To make it scroll in smaller 'steps'.

Rotating in IE8: translation not working properly

I have a need to rotate an image in a web application. In an earlier post it was explained to me that on rotation I need to 'translate' the image because the center point changes.
I'm using the HeyGrady 2D transfrom JQuery plugin for rotating and provide it the translation as was suggested, which works fine on FF/Chrome/Safari/IE9. However, on IE8 this does not work well.
Please have a look at the following link.
If you run this on FF/Chrome/Safari/IE9 the image rotates just fine (stays within the black border). However, if you run this on IE8 it will cross the black border boundary when rotating to 90 or 270 degrees.
The plugin project page mentions that "IE also lacks support for transform-origin and translate() [...] The jQuery Transform plug-in handles these calculations automatically". However, it does not seem to do so.
Anyone has any ideas what the problem may be?
Thanks!
I also ran into this same issue in IE 8 using HeyGrady's jQuery transform plugin. Here's a fix by adding this to the execMatrix function, around line 290:
Replace this line:
this.fixPosition(matrix, tx, ty);
With this:
// factor in the object's current rotation so translation remains straight up/down/left/right
// otherwise, object will be translated along the rotated axis, which produces undesirable effects
var rotation = parseInt(this.$elem.css('rotate')) * -1, // the current rotation in degrees, inverted
radians = rotation * (Math.PI / 180), // convert degrees to radians
newX = (tx * (Math.cos(radians))) - (ty * (Math.sin(radians))), // calculate new x
newY = (tx * (Math.sin(radians))) + (ty * (Math.cos(radians))); // calculate new y
this.fixPosition(matrix, newX, newY);

jQuery and animating around a central point

I would like to know the best way to animate an element in a circular motion around a central point?
I couldn't quite figure it out... :(
Thanks in advance.
Neuroflux.
Use the jquery.path plugin, and here is a demo.
(found it from another question: How would you animate something so that it follows a curve?)
easiest i can think of is:
make the central point position relative
make the animated element to be child of above
calculate the top, left using:
math.sin(time * (angle /second)) * distance
math.cos(....)
simple demo:
var elem = $('h1:eq(0)')
.append('<span id="round" style="position:absolute;background-color:red;"> </span>')
.css('position','relative')
.find('span#round');
var i = 0;
setInterval(function(){
++i;
elem.css({'left': Math.sin(i * 0.02) * 100, 'top': Math.cos(i * 0.02) * 100});}, 100);
See it in action at jsfiddle.

Categories

Resources