I'm using kineticjs to draw some widget on a canvas. This widget is 600px wide and is composed of several rectangles (24 by default). On this rectangles an other one can be dragged, let's call it "cursor".
Instead of a smooth drag, i want the cursor to jump to the other rectangles only when my mouse is far enough (like a stepped drag if you prefer).
For example if the cursor is at 0,0 and i have a total of 24 rectangles , i want my cursor to move to the next rectangle only when my mouse is at 25,0 (600px / 24 rectangles = 25px).
So to do that i have implemented :
cursor.setDragBoundFunc(function(pos){
var caseSize = WIDTH / caseNum;
var posX = Math.round(pos.x/caseNum) * caseSize;
if(posX > (WIDTH - caseSize)) {
posX = WIDTH - caseSize;
}
if(posX < 0 ) {
posX = 0;
}
return {
x: posX,
y: cursor.getAbsolutePosition().y
}
});
The problem is pos.x does not represent the mouse position in the canvas but the mouse position from the start of the drag event (pos will be 0,0 even if i start dragging from middle of the canvas).
Here a example of the problem : http://jsfiddle.net/H9rpz/
How can i get the mouse position in the canvas in setDragBoundFunc() ?
Thanks
This exact feature has been implemented in a KineticJS manual test. Here's the code you're looking for:
https://github.com/ericdrowell/KineticJS/blob/master/tests/js/manualTests.js#L1004
Give it a try :)
It seems the setDragBoundFunc function accepts two arguments and the second is an event object that might contain what you're after:
cursor.setDragBoundFunc(function(pos, event){
var posX = event.offsetX;
....
});
You also have a math logic error at the beginning of the function. It should read:
cursor.setDragBoundFunc(function(pos, event){
var caseSize = WIDTH / caseNum;
var posX = event.offsetX;
posX = Math.floor(posX / caseSize) * caseSize; // This right here
...
});
Working example:
http://jsfiddle.net/H9rpz/3/
In addition to #Jan's answer, your math is a bit off:
cursor.setDragBoundFunc(function(pos, event){
var posX = event.offsetX;
posX = Math.floor(posX/WIDTH * caseNum) * caseWidth;
...
Related
I have a simple function which the user can click and drag the camera. The camera moves with a slight smoothness, but i do not know a simple way to stop the camera once it has caught up to the mouse position.
I'm sure it's just a simple maths logic error, but currently the camera just keeps floating off forever.
This is my function:
function drag(evt,el){
clearInterval(timer);
if(evt.button == 2){ //right click and drag
mousePos = {};
mousePos.x = evt.offsetX / scale;
mousePos.y = evt.offsetY / scale;
function update(e){
var difx = mousePos.x - (e.offsetX/scale),
dify = mousePos.y - (e.offsetY/scale);
var targetX = camera.x + difx;
var targetY = camera.y + dify;
//update for next mouse movement
mousePos.x = e.offsetX / scale;
mousePos.y = e.offsetY / scale;
function smooth(){ // the problems lay here
if(camera.x != targetX){
camera.x += (difx * lerp);
}
if(camera.y != targetY){
camera.y += (dify * lerp);
}
}
timer = setInterval(smooth,16);
}
function clear(){
el.removeEventListener('mousemove', update, false);
this.removeEventListener('mouseup', clear, false);
}
el.addEventListener('mousemove',update,false);
document.body.addEventListener('mouseup',clear,false);
}}
I have the code in action here http://jsfiddle.net/bbb9q2c3/ if you click and drag then let go the box will keep moving because my current code does not seem to detect when the camera has reached it's target.
What can i do to solve this issue?
I fiddled with this a bit.
Here's what I changed:
In the draw function I removed translate, so that the camera coordinates match mouse coordinates. So camera with (0,0) is at the top left and not middle.
Use threshold to check if camera is near the mouse ath.abs(dify) > 1.
Added clearInterval to update function. It is less responsive now, so you may want to fiddle with that.
Set square to the middle position in the initialization.
I would like to be able to click on an object, and have it zoomed to its boundingbox in the canvas viewport. How do I accomplish that? See http://jsfiddle.net/tinodb/qv989nzs/8/ for what I would like to get working.
Fabricjs' canvas has the zoomToPoint method (about which the docs say: Sets zoom level of this canvas instance, zoom centered around point), but that does not center to the given point, but it does work for zooming with scrolling. See http://jsfiddle.net/qv989nzs/
I tried several other approaches, like using canvas.setViewportTransform:
// centers a circle positioned at (200, 150)??
canvas.setViewportTransform([2, 0, 0, 2, -250, -150])
But I can't find the relation between the last two parameters to setViewportTransform and the position of the object.
(Btw, another problem is with the first example fiddle, that the zooming only works on the first click. Why is that?)
I found a way to do this, which is composed of:
canvas.setZoom(1) // reset zoom so pan actions work as expected
vpw = canvas.width / zoom
vph = canvas.height / zoom
x = (object.left - vpw / 2) // x is the location where the top left of the viewport should be
y = (object.top - vph / 2) // y idem
canvas.absolutePan({x:x, y:y})
canvas.setZoom(zoom)
See http://jsfiddle.net/tinodb/4Le8n5xd/ for a working example.
I was unable to get it to work with zoomToPoint and setViewportTransform (the latter of which does strange things, see for example http://jsfiddle.net/qv989nzs/9/ and click the blue circle; it is supposed to put the top left viewport at (25, 25), but it does not)
Here's an example of how to do it with setViewportTransform:
// first set the zoom, x, and y coordinates
var zoomLevel = 2;
var objectLeft = 250;
var objectTop = 150;
// then calculate the offset based on canvas size
var newLeft = (-objectLeft * zoomLevel) + canvas.width / 2;
var newTop = (-objectTop * zoomLevel) + canvas.height / 2;
// update the canvas viewport
canvas.setViewportTransform([zoomLevel, 0, 0, zoomLevel, newLeft, newTop]);
I want to visualize a huge diagram that is drawn in a HTML5 canvas. As depicted below, let’s imagine the world map, it’s impossible to visualize it all at the same time with a “decent” detail. Therefore, in my canvas I would like to be able to pan over it using the mouse to see the other countries that are not visible.
Does anyone know how to implement this sort of panning in a HTML5 canvas? Another feature would be the zoom in and out.
I've seen a few examples but I couldn't get them working nor they seam to address my question.
Thanks in advance!
To achieve a panning functionality with a peep-hole it's simply a matter of two draw operations, one full and one clipped.
To get this result you can do the following (see full code here):
Setup variables:
var ctx = canvas.getContext('2d'),
ix = 0, iy = 0, /// image position
offsetX = 0, offsetY = 0, /// current offsets
deltaX, deltaY, /// deltas from mouse down
mouseDown = false, /// in mouse drag
img = null, /// background
rect, /// rect position
rectW = 200, rectH = 150; /// size of highlight area
Set up the main functions that you use to set size according to window size (including on resize):
/// calc canvas w/h in relation to window as well as
/// setting rectangle in center with the pre-defined
/// width and height
function setSize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
rect = [canvas.width * 0.5 - rectW * 0.5,
canvas.height * 0.5 - rectH * 0.5,
rectW, rectH]
update();
}
/// window resize so recalc canvas and rect
window.onresize = setSize;
The main function in this is the draw function. Here we draw the image on the position calculated by mouse moving (see next section).
First step to get that washed-out look is to set alpha down to about 0.2 (you could also draw a transparent rectangle on top but this is more efficient).
Then draw the complete image.
Reset alpha
Draw the peep-hole using clipping with corrected offsets for the source.
-
/// main draw
function update() {
if (img === null) return;
/// limit x/y as drawImage cannot draw with negative
/// offsets for clipping
if (ix + offsetX > rect[0]) ix = rect[0] - offsetX;
if (iy + offsetY > rect[1]) iy = rect[1] - offsetY;
/// clear background to clear off garbage
ctx.clearRect(0, 0, canvas.width, canvas.height);
/// make everything transparent
ctx.globalAlpha = 0.2;
/// draw complete background
ctx.drawImage(img, ix + offsetX, iy + offsetY);
/// reset alpha as we need opacity for next draw
ctx.globalAlpha = 1;
/// draw a clipped version of the background and
/// adjust for offset and image position
ctx.drawImage(img, -ix - offsetX + rect[0], /// sx
-iy - offsetY + rect[1], /// sy
rect[2], rect[3], /// sw/h
/// destination
rect[0], rect[1], rect[2], rect[3]);
/// make a nice sharp border by offsetting it half pixel
ctx.strokeRect(rect[0] + 0.5, rect[1] + 0.5, rect[2], rect[3]);
}
Now it's a matter of handling mouse down, move and up and calculate the offsets -
In the mouse down we store current mouse positions that we'll use for calculating deltas on mouse move:
canvas.onmousedown = function(e) {
/// don't do anything until we have an image
if (img === null) return;
/// correct mouse pos
var coords = getPos(e),
x = coords[0],
y = coords[1];
/// store current position to calc deltas
deltaX = x;
deltaY = y;
/// here we go..
mouseDown = true;
}
Here we use the deltas to avoid image jumping setting the corner to mouse position. The deltas are transferred as offsets to the update function:
canvas.onmousemove = function(e) {
/// in a drag?
if (mouseDown === true) {
var coords = getPos(e),
x = coords[0],
y = coords[1];
/// offset = current - original position
offsetX = x - deltaX;
offsetY = y - deltaY;
/// redraw what we have so far
update();
}
}
And finally on mouse up we make the offsets a permanent part of the image position:
document.onmouseup = function(e) {
/// was in a drag?
if (mouseDown === true) {
/// not any more!!!
mouseDown = false;
/// make image pos. permanent
ix += offsetX;
iy += offsetY;
/// so we need to reset offsets as well
offsetX = offsetY = 0;
}
}
For zooming the canvas I believe this is already answered in this post - you should be able to merge this with the answer given here:
Zoom Canvas to Mouse Cursor
To do something like you have requested, it is just a case of having 2 canvases, each with different z-index. one canvas smaller than the other and position set to the x and y of the mouse.
Then you just display on the small canvas the correct image based on the position of the x and y on the small canvas in relation to the larger canvas.
However your question is asking for a specific solution, which unless someone has done and they are willing to just dump their code, you're going to find it hard to get a complete answer. I hope it goes well though.
In the following fiddle, you can click and drag around the image, and it will not be able to exit the blue border. By clicking the red and green rectangles, you can rotate the image. However when you click and drag a rotated object, the image does not follow the mouse. I would like the image to follow the mouse even if it is rotated.
http://jsfiddle.net/n3Sn5/
I think the issue occurs within my move function
move = function (dx, dy)
{
nowX = Math.min(boundary.attr("x")+boundary.attr("width")-this.attr("width"), this.ox + dx);
nowY = Math.min(boundary.attr("y")+boundary.attr("height")-this.attr("height"), this.oy + dy);
nowX = Math.max(boundary.attr("x"), nowX);
nowY = Math.max(boundary.attr("y"), nowY);
this.attr({x: nowX, y: nowY });
}
One thing to notice is that when you click and drag a rotated object, after you release your mouse click, if you rotate the image, it snaps to where your mouse was when you released the mouse click, even obeying the boundary.
I was able to get the rotated image to drag with the mouse previously, but by adding the boundary rectangle, i had to use a more complex approach.
If anyone has an idea of what I need to change, I would be very grateful!
Thanks!
The required output can be achieved in a bit different way. Please check the fiddle at http://jsfiddle.net/6BbRL/. I have trimmed to code to keep the basic parts for demo.
var paper = Raphael(0, 0, 475, 475),
boxX = 100,
boxY = 100,
boxWidth = 300,
boxHeight = 200,
// EDITED
imgWidth = 50,
imgHeight = 50,
box = paper.rect(boxX, boxY, boxWidth, boxHeight).attr({fill:"#ffffff"}),
// EDITED
html5 = paper.image("http://www.w3.org/html/logo/downloads/HTML5_Badge_512.png",boxX+boxWidth-imgWidth,boxY+boxHeight-imgHeight,imgWidth,imgHeight)
.attr({cursor: "move"}),
elementCounterClockwise = paper.rect(180, 0, 50, 50).attr({fill:"#ff5555", cursor:"pointer"}),
elementClockwise = paper.rect(250, 0, 50, 50).attr({ fill: "#55ff55", cursor: "pointer" }),
boundary = paper.rect(50,50,400,300).attr({stroke: '#3333FF'}),
transform,
// EDITED
xBound = {min: 50 + imgWidth/2, max: 450 - imgWidth/2},
yBound = {min: 50 + imgHeight/2, max: 350 - imgHeight/2};
start = function (x, y) {
// Find min and max values of dx and dy for "html5" element and store them for validating dx and dy in move()
// This is required to impose a rectagular bound on drag movement of "html5" element.
transform = html5.transform();
}
move = function (dx, dy, x, y) {
// To restrict movement of the dragged element, Validate dx and dy before applying below.
// Here, dx and dy are shifts along x and y axes, with respect to drag start position.
// EDITED
var deltaX = x > xBound.max && xBound.max - x || x < xBound.min && xBound.min - x || 0;
deltaY = y > yBound.max && yBound.max - y || y < yBound.min && yBound.min - y || 0;
this.attr({transform: transform + 'T'+ [dx + deltaX, dy + deltaY]});
}
up = function () {
};
html5.drag(move, start, up);
elementClockwise.click(function() {
html5.animate({transform: '...r90'}, 100);
})
elementCounterClockwise.click(function() {
html5.animate({transform: '...r-90'}, 100);
})
Use of '...' to append a transformation to the pre-existing transformation state (Raphael API) is important for the rotational issue. While, for translating the element on drag requires absolute translation, which neglects the rotational state of the element while translating the element.
//EDIT NOTE
Drag bounding is worked on and updated. However, there remains an issue with incorporating the difference between mouse position and image center.
I can help you with your rotation and drag problem, you need to store the rotation and apply it after you have moved the object.
elementClockwise.node.onclick = function()
{
html5.animate({'transform': html5.transform() +'r90'}, 100, onAnimComplete);
}
elementCounterClockwise.node.onclick = function()
{
html5.animate({'transform': html5.transform() +'r-90'}, 100, onAnimComplete);
}
function onAnimComplete(){
default_transform = html5.transform();
}
At present I can't get the boundary to work, but will have a try later.
http://jsfiddle.net/n3Sn5/2/
I have scale handles that can let you scale the object.
The handles in the corners have dragbehavior = 0 the upper and bottom 1 and the left and right 2.
dragBoundFunc: function(pos) {
if(dragbehavior == 0) {var posx = pos.x; var posy = pos.y;}
if(dragbehavior == 1) {var posx = this.getAbsolutePosition().x; var posy = pos.y;}
if(dragbehavior == 2) {var posx = posx; var posy = this.getAbsolutePosition().y;}
return {
x: posx,
y: posy
}
},
This works perfectly and when I rotate a object then the corner does still fine, but the handlers on the side are acting strangely after rotation. I know I need some rotate translation (sin/cos) but I don't know how to implement it. This is because most examples uses some orientation from the object itself you want to rotate, but this is with coordinates of the stage.
My mouse is at the arrow but the the rect is larger and the scale handle is not on the rect place. If I try to do the cursor at the end of the rect the rect stretches acros the whole screen.
Is the rotation applied on a group containing the shape and the handlers ?