kinetic js : dragBoundFunc property does not work properly - javascript

I have a disturbing issue with kinetic js using dragBoundFunc.
I have dragBoundFunc defined on selector group, and it works perfectly not allowing the group overflow on the green rectangle. The erroneous case is follows:
1 - drag an anchor to resize selector rectangle, try to drag the anchor outside green rectangle. It will seem not moving outside bounds.
2 - now move selector rectangle to the edges in order to check bounds. You'll see that as if the green rectangle's position is somehow shifted from its original position.
How can I solve this strange behaviour? Any ideas?
Here is the fiddle.

Because rect and anchors is placed relative to group, you shoud move them after drag. I think best way to keep left top anchor and rectangle coord as {0, 0} in group.
group.on("dragend",function(){
var rect = group.get('#rectangle')[0];
var pos = rect.getPosition();
var dx = pos.x;
var dy = pos.y;
group.children.each(function(child){
child.move(-dx, -dy);
});
group.setPosition({
x : pos.x + group.getPosition().x,
y : pos.y + group.getPosition().y
});
layer.draw();
});
http://jsfiddle.net/lavrton/TfgAV/1/

Related

Cursor do not follow the position of drawn rectangle in html5 canvas

I have this code that let me draw rectangle on canvas:
https://jsfiddle.net/6u7bLkwc/4/
In order to draw a rectangle on the canvas, click on the image and then drag your mouse.
To reproduce my problem please follow this steps:
Draw a rectangle like mentionned in the top.
And then click on ADD TEXT button.
Now try to draw another rectangle, you will see that your cursor are not in the same way with the rectangle.
How to make my code work even if i add or remove any elements on the page dynamically?
I tried to do like this:
var shape = new Shape(mouseDownX - canvasOffset.left, mouseDownY - canvasOffset.top, mouseX - mouseDownX, mouseY - mouseDownY, color);
But didn't resolved it.
Something like updating new positions will solve it, but not have idea about how to process.
check the solution over here : https://jsfiddle.net/6u7bLkwc/9/
the problem is that you are not calculating the PageX and PageY relative to the canvas position, but instead to the whole page which is giving you wrong coordinates.
I have just changed these:
mouseDownX = e.pageX;
mouseDownY = e.pageY;
to this:
mouseDownX = e.pageX - this.offsetLeft;
mouseDownY = e.pageY - this.offsetTop;
UPDATE
For some other cases you should just use getBoundingClientRect() method on the canvas to get the element position relative to the viewport as the following jsfiddle shows sfiddle.net/dkboaq7p/2
// Get Element's relative position
var canvasPosition=document.getElementById("canvas").getBoundingClientRect();
mouseDownX = e.pageX - canvasPosition.left;
mouseDownY = e.pageY - canvasPosition.top;

How to make canvas -element to fill and refill depending on the mouse position

I have a script that follows Y-position of mouse and then fills the width of a <canvas> rectangle as the mouse moves down.
In other words: The lower the mouse - the wider area of the canvas is colored, and vice versa.
Fiddle here
Now the problem is that canvas only fills and if the mouse is moved up, the filled area stays the same instead of shrinking.
Thanks in advance!
This is because the Canvas literally behaves as a canvas.
Your script paints the line green. It cannot un-paint the line.
you will need to have an equal opposite function that is constantly filling the line in Red from the other side.
you could achieve this a lot more easily without using Canvas.
$(document).mousemove(function(e){
var mouseY = e.pageY;
$('.fill').width(mouseY);
});
see Example JSFIDDLE
You could also make this show both X and Y very easily like so:
$(document).mousemove(function(e){
var mouseY = e.pageY;
var mouseX = e.pageX;
$('.fillY').width(mouseY);
$('.fillX').width(mouseX);
});
See Example JSFIDDLE

How to use css3 translate to move to an absolute position

How would I use css3 to translate to an absolute position. It seems that it always translates relative to my current location (where my current location is 0,0), but I'd rather it translate it relative to the screen, so that the upper left portion of the screen is 0,0.
http://jsbin.com/qujabe/1/edit
For example, I'd like to be able to move the red box (when clicked) onto the green box using the green box's offset() position. (note: I want to do this with css3 translate not left/top absolute coordinates)
Here, add this before your function "flyToBox2()"
var myVarW = $("#box1").offset().left;
var myVarH = $("#box1").offset().top;
and change
translate('#box1',30,30, '1s');
to
translate('#box1',-myVarW+30,-myVarH+30, '1s');
Unfortunately jsfiddle is down at the moment, otherwise I would include a link to a fiddle as well
Here's how I ended up doing it.
function translateToAbsolute(sel, x, y, dur)
{
var offset = $(sel).offset();
var newX = -offset.left+x;
var newY = -offset.top+y;
$(sel).css('transition','all '+dur+' ease');
$(sel).css('transform','translate('+newX+'px,'+newY+'px)');
}

How to get the correct mouse position in relation to a div that has has a scale transform applied

I am using CSS transform scale to create a smooth zoom on a div. The problem is that I want to be able to get the correct mouse position in relation to div even when scaled up, but I can seem figure out the correct algorithm to get this data. I am retrieving the current scale factor from:
var transform = new WebKitCSSMatrix(window.getComputedStyle($("#zoom_div")[0]).webkitTransform);
scale = transform.a;
When I read the position of the div at various scale settings it seems to report the correct position, i.e. when I scale the div until is is larger the the screen the position left and top values are negative and appear to be correct, as does the returned scale value:
$("#zoom_div").position().left
$("#zoom_div").position().top
To get the current mouse position I am reading the x and y position from the click event and taking away the offset. This works correctly at a scale value of 1 (no scale) but not when the div is scaled up. Here is my basic code:
$("#zoom_div").on("click", function(e){
var org = e.originalEvent;
var pos = $("#zoom_div").position();
var offset = {
x:org.changedTouches[0].pageX - pos.left,
y:org.changedTouches[0].pageY - pos.top
}
var rel_x_pos = org.changedTouches[0].pageX - offset.x;
var rel_y_pos = org.changedTouches[0].pageY - offset.y;
var rel_pos = [rel_x_pos, rel_y_pos];
return rel_pos;
});
I have made several attempts at multiplying dividing adding and subtracting the scale factor to/from from the pageX / Y but without any luck. Can anyone help me figure out how to get the correct value.
(I have simplified my code from the original to hopefully make my question clearer, any errors you may find in the above code is due to that editing down. My original code with the exception for the mouse position issue).
To illustrate what I am talking about I have made a quick jsfiddle example that allows the dragging of a div using translate3d. When the scale is normal (1) the div is dragged at the point where it is clicked. When the div is scales up (2) it no longer drags correctly from the point clicked.
http://jsfiddle.net/6EsYG/12/
You need to set the webkit transform origin. Basically, when you scale up it will originate from the center. This means the offset will be wrong. 0,0 will start in the center of the square. However, if you set the origin to the top left corner, it will keep the correct coordinates when scaling it. This is how you set the origin:
#zoom_div{
-webkit-transform-origin: 0 0;
}
This combined with multiplying the offset by the scale worked for me:
offset = {
"x" : x * scale,
"y" : y * scale
}
View jsFiddle Demo
dont use event.pageX - pos.left, but event.offsetX (or for some browser: event.originalEvent.layerX
div.on('click',function(e) {
var x = (e.offsetX != null) ? e.offsetX : e.originalEvent.layerX;
var y = (e.offsetY != null) ? e.offsetY : e.originalEvent.layerY;
});
see my jsFiddle exemple: http://jsfiddle.net/Yukulele/LdLZg/
You may embed the scaled content within an iframe. Scale outside the iframe to enable scaled mouse events within the iframe as mouse events are document scope.

relative mouse coordinates in a DIV - javascript

I'm moving the mouse over a div and I want to know the mouse coordinates with respect to the div origin. (upper left corner)
I expected the mousemove event to contain the relative (client?) coordinates of the mouse, but apparently it doesn't.
In firefox for instance, none of the event properties* contain relative coordinates
Am I missing something?
*clientX,Y - pageX,Y - screenX, y
You're not missing anything, but you'll need to calculate the relative coordinates yourself.
Something along these lines should do it (substitute jquery with w/e code you want to use to get the position):
var pos = $('div').position();
var relX = event.pageX - pos.left;
var relY = event.pageY - pos.top;
Also see: JS: mouse coordinates relative to an element which covers some of the details on supporting other browsers (though if you're using jquery that may not be needed).

Categories