Kineticjs group begins to drag when its resized to minimum size -
i have kineticjs canvas 1 layer on it. layer has group. group has 4 anchors , image. used code resizing tutorial (http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/) modifications. wanted enforce minimun size (50 x 50px). when user drags 1 of resizing anchors (topleft or bottomright), once reaches minimum size, whole group begins drag. happens topleft anchor. bottomright behaves expected (when reaches minimum size, stops , group doesn't drag). appreciated. thanks.
here code using:
the selector calls resizingmodeon()
$('.someselector').on('click', function() { // created layer, created image... // add new layer stage, // add group layer, // add large image group group.add(image); newlayer.add(group); stage.add(newlayer); addanchor(group, 0, 0, 'topleft'); addanchor(group, image.getwidth(), 0, 'topright'); addanchor(group, 0, image.getheight(), 'bottomleft'); addanchor(group, image.getwidth(), image.getheight(), 'bottomright'); // turn on resizing mode resizingmodeon(group); }; function addanchor(group, x, y, name) { var stage = group.getstage(); var layer = group.getlayer(); var anchor = new kinetic.circle({ x: x, y: y, stroke: '#666', strokewidth: 2, radius: 8, name: name, dragontop: false }); anchor.on('dragend', function() { group.setdraggable(true); layer.draw(); }); anchor.on('mousedown touchstart', function() { group.setdraggable(false); this.movetotop(); }); // add hover styling anchor.on('mouseover', function() { var layer = this.getlayer(); document.body.style.cursor = 'pointer'; this.setstrokewidth(4); layer.draw(); }); anchor.on('mouseout', function() { var layer = this.getlayer(); document.body.style.cursor = 'default'; this.setstrokewidth(2); layer.draw(); }); group.add(anchor); //anchor.hide(); } this turns on resizing anchors (topleft, bottomright)
function resizingmodeon(group) { // iterate through anchors , set them var layer = group.getlayer(); var anchors = group.getchildren(); (n = 0; n < anchors.length; n++) { switch(anchors[n].getname()) { // topleft , bottom right buttons used resizing case 'topleft': case 'bottomright': anchors[n].setfill('#ddd'); anchors[n].setdraggable('true'); anchors[n].on('dragmove', function() { update(this); layer.draw(); }); break; // topright button delete/exit button case 'topright': anchors[n].setfill('ff0000'); anchors[n].setdraggable(false); break; case 'bottomleft': anchors[n].setfill('0000ff'); anchors[n].setdraggable(false); break; default: break; } } } the update function update anchor positions
function update(activeanchor) { var group = activeanchor.getparent(); var topleft = group.get('.topleft')[0]; var topright = group.get('.topright')[0]; var bottomright = group.get('.bottomright')[0]; var bottomleft = group.get('.bottomleft')[0]; var image = group.get('.image')[0]; var anchorx = activeanchor.getx(); var anchory = activeanchor.gety(); // update anchor positions switch (activeanchor.getname()) { case 'topleft': topright.sety(anchory); bottomleft.setx(anchorx); break; case 'topright': topleft.sety(anchory); bottomright.setx(anchorx); break; case 'bottomright': bottomleft.sety(anchory); topright.setx(anchorx); break; case 'bottomleft': bottomright.sety(anchory); topleft.setx(anchorx); break; } // enforces minimum size if (topright.getx() < topleft.getx() + 50) { topright.setx(topleft.getx() + 50); } if (bottomright.getx() < topleft.getx() + 50) { bottomright.setx(topleft.getx() + 50); } if (bottomright.gety() < topleft.gety() + 50) { bottomright.sety(topleft.gety() + 50); } if (bottomleft.gety() < topleft.gety() + 50) { bottomleft.sety(topleft.gety() + 50); } // enforces minimum size var height = bottomleft.gety() - topleft.gety(); var width = topright.getx() - topleft.getx(); // update handle positions reflect new image dimensions topleft.setposition(topleft.getx(), topleft.gety()); topright.setposition(topright.getx(), topright.gety()); bottomright.setposition(bottomright.getx(), bottomright.gety()); bottomleft.setposition(bottomleft.getx(), bottomleft.gety()); image.setposition(topleft.getx(), topleft.gety()); if(width && height) { image.setsize(width, height); } }
you're on right track, you're missing "enforcement" on anchors restrict resizing/dragging image.
in example:
// enforces minimum size if (topright.getx() < topleft.getx() + 50) { topright.setx(topleft.getx() + 50); } if (bottomright.getx() < topleft.getx() + 50) { bottomright.setx(topleft.getx() + 50); } if (bottomright.gety() < topleft.gety() + 50) { bottomright.sety(topleft.gety() + 50); } if (bottomleft.gety() < topleft.gety() + 50) { bottomleft.sety(topleft.gety() + 50); } only bottomright anchor enforced through (x,y). enforce x value topright, , y value bottomleft. rest? need enforce (x,y) 4 corners.
note: why image "dragging when resized minimum size". it's because image position being updated topleft position, x or y value not enforced every anchor code moves anchors , image together, simulating "dragging" effect.
this how did it few edits tutorial:
function update(activeanchor) { var group = activeanchor.getparent(); var topleft = group.get('.topleft')[0]; var topright = group.get('.topright')[0]; var bottomright = group.get('.bottomright')[0]; var bottomleft = group.get('.bottomleft')[0]; var image = group.get('.image')[0]; var anchorx = activeanchor.getx(); var anchory = activeanchor.gety(); // update anchor positions switch (activeanchor.getname()) { case 'topleft': topright.sety(anchory); bottomleft.setx(anchorx); if (anchorx > topright.getx() - 50) { activeanchor.setx(topright.getx() - 50); bottomleft.setx(topright.getx() - 50); } if (anchory > bottomleft.gety() - 50) { activeanchor.sety(bottomleft.gety() - 50); topright.sety(bottomleft.gety() - 50); } break; case 'topright': topleft.sety(anchory); bottomright.setx(anchorx); if (anchorx < topleft.getx() + 50) { activeanchor.setx(topleft.getx() + 50); bottomright.setx(topleft.getx() + 50); } if (anchory > bottomleft.gety() - 50) { activeanchor.sety(bottomleft.gety() - 50); topleft.sety(bottomleft.gety() - 50); } break; case 'bottomright': bottomleft.sety(anchory); topright.setx(anchorx); if (anchorx < bottomleft.getx() + 50) { activeanchor.setx(bottomleft.getx() + 50); topright.setx(bottomleft.getx() + 50); } if (anchory < topleft.gety() + 50) { activeanchor.sety(topleft.gety() + 50); bottomleft.sety(topleft.gety() + 50); } break; case 'bottomleft': bottomright.sety(anchory); topleft.setx(anchorx); if (anchorx > topright.getx() - 50) { activeanchor.setx(topright.getx() - 50); topleft.setx(topright.getx() - 50); } if (anchory < topleft.gety() + 50) { activeanchor.sety(topleft.gety() + 50); bottomright.sety(topleft.gety() + 50); } break; } image.setposition(topleft.getposition()); var width = topright.getx() - topleft.getx(); var height = bottomleft.gety() - topleft.gety(); if (width && height) { image.setsize(width, height); } } it's bit different approach, it's same idea , works. should able see mean , adapt code. luck!
Comments
Post a Comment