調整大小的左上角螺絲了我的X和Y位置

Question

我使用的是我發現KineticJS大小調整和微調，以適合我的需要（http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/）

其中的一個需求是，我的用戶可以重設將它們的圖像放置到特定的X和Y位置，並使圖像適合繪圖框（由腳本定義，它是中心/中心的框，並且是保存時剪切的部分）。然而;當我調整左上角的圖像大小時，X和Y會變成負數。所以，如果我想讓我的用戶能夠重置他們的圖像，讓我們說，0,0 0. 0，0線已關閉後，他們用topLeft錨定。

有沒有辦法通過其他方式鍛鍊到0，0線。或者，也許使用該組或將它所在的圖像作爲基準進行分層？

該階段的init（它汲取4個矩形周圍的邊界以匹配drawbox。一切都將除了在中心/中心的箱，這將是該切口關閉上保存圖像被覆蓋。

function initStage(image) { 
    stage = new Kinetic.Stage({ 
     container: 'container', 
     width: workspaceWidth, 
     height: workspaceHeight 
    }); 



    //Get the top, bottom, left and right square sized. used for X/y positioning and the creation of the ovelray 
    var top_bottom_sides = (workspaceHeight-drawboxHeight)/2; 
    var left_right_sides = (workspaceWidth-drawboxWidth)/2; 

    imageGroupX = left_right_sides; 
    imageGroupY = Math.ceil(top_bottom_sides); 
    imgGroup = new Kinetic.Group({ 
     /*x: (workspaceWidth/2)-(image.width/2), 
     y: (workspaceHeight/2)-(image.height/2),*/ 
     x: imageGroupX, 
     y: imageGroupY, 
     draggable: true, 
     dragOnTop: false 
    }) 

    layer = new Kinetic.Layer(); 
    //add the imgGroup to the layer and the layer to the stage. 
    imageImg = new Kinetic.Image({ 
     /*x: left_right_sides-imgGroup.getX(), 
     y: Math.ceil(top_bottom_sides)-imgGroup.getY(),*/ 
     x: 0, 
     y: 0, 
     image: image, 
     width: image.width, 
     height: image.height, 
     name: 'image', 
    }); 



    imgGroup.add(imageImg); 
    layer.add(imgGroup); 

    addAnchor(imgGroup, 0, 0, 'topLeft'); 
    addAnchor(imgGroup, image.width, 0, 'topRight'); 
    addAnchor(imgGroup, image.width, image.height, 'bottomRight'); 
    addAnchor(imgGroup, 0, image.height, 'bottomLeft'); 

    //Create 4 rectangles and place them around the borders to create an overlay which matches the drawing box 
    //Ceil the height to avoid 0.5 pixel overlap on some dimensions 
    rect1 = new Kinetic.Rect({ //top 
     x: 0, 
     y: 0, 
     width: workspaceWidth, 
     height: Math.ceil(top_bottom_sides), 
     fill: '#000000', 
     opacity: 1, 
     listening: false 
    }); 

    //Floor the height to not have a 0.5 pixel overlap on some dimensions 
    rect2 = new Kinetic.Rect({ // bottom 
     x: 0, 
     y: Math.ceil(workspaceHeight-top_bottom_sides), 
     width: workspaceWidth, 
     height: Math.floor(top_bottom_sides), 
     fill: '#000000', 
     opacity: 1, 
     listening: false 
    }); 

    rect3 = new Kinetic.Rect({ //right 
     x: rect1.getWidth()-left_right_sides, 
     y: rect1.getX()+rect1.getHeight(), 
     width: left_right_sides, 
     height: drawboxHeight, 
     fill: '#000000', 
     opacity: 1, 
     listening: false 
    }); 

    rect4 = new Kinetic.Rect({ //left 
     x: rect1.getX(), 
     y: rect1.getX()+rect1.getHeight(), 
     width: left_right_sides, 
     height: drawboxHeight, 
     fill: '#000000', 
     opacity: 1, 
     listening: false 
    }); 


    layer.add(rect1); 
    layer.add(rect2); 
    layer.add(rect3); 
    layer.add(rect4); 

    layer.on('mouseover', function() { 
     rect1.setOpacity(0.5); 
     rect2.setOpacity(0.5); 
     rect3.setOpacity(0.5); 
     rect4.setOpacity(0.5); 
     layer.draw(); 
    }); 

    layer.on('mouseout', function() { 
     rect1.setOpacity(1); 
     rect2.setOpacity(1); 
     rect3.setOpacity(1); 
     rect4.setOpacity(1); 
     layer.draw(); 
    }); 

    stage.add(layer); 

    stage.draw(); 
    fitImage(); 
} 

我的更新，其中不錨拖拽調整：

function update(activeAnchor, optionalX, optionalY) { 
    //var group = activeAnchor.getParent(); 
    var group = imgGroup; 
    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]; 
    if (optionalX && optionalY) { 
     var anchorX = optionalX; 
     var anchorY = optionalY; 
    } else { 
     var anchorX = activeAnchor.getX(); 
     var anchorY = activeAnchor.getY(); 
    } 


    var activeHandleName = activeAnchor.getName(); 
    // update anchor positions 
    switch (activeHandleName) { 
     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; 
    } 

    if (jQuery('#keep_ratio:checked').val() != undefined) { 
     // Calculate new dimensions. Height is simply the dy of the handles. 
     // Width is increased/decreased by a factor of how much the height changed. 
     newHeight = bottomLeft.getY() - topLeft.getY(); 
     newWidth = image.getWidth() * newHeight/image.getHeight(); 

     // Move the image to adjust for the new dimensions. 
     // The position calculation changes depending on where it is anchored. 
     // ie. When dragging on the right, it is anchored to the top left, 
     //  when dragging on the left, it is anchored to the top right. 
     if(activeHandleName === "topRight" || activeHandleName === "bottomRight") { 
      image.setPosition(topLeft.getX(), topLeft.getY()); 
     } else if(activeHandleName === "topLeft" || activeHandleName === "bottomLeft") { 
      image.setPosition(topRight.getX() - newWidth, topRight.getY()); 
     } 

    } else { 
     var newWidth = topRight.getX() - topLeft.getX(); 
     var newHeight = bottomLeft.getY() - topLeft.getY(); 
     if(activeHandleName === "topRight" || activeHandleName === "bottomRight") { 
      image.setPosition(topLeft.getX(), topLeft.getY()); 
     } else if(activeHandleName === "topLeft" || activeHandleName === "bottomLeft") { 
      image.setPosition(topRight.getX() - newWidth, topRight.getY()); 
     } 

    } 

    imageX = image.getX(); 
    imageY = image.getY(); 


    // Update handle positions to reflect new image dimensions 
    topLeft.setPosition(imageX, imageY); 
    topRight.setPosition(imageX + newWidth, imageY); 
    bottomRight.setPosition(imageX + newWidth, imageY + newHeight); 
    bottomLeft.setPosition(imageX, imageY + newHeight); 

    var width = newWidth; 
    var height = newHeight; 

    if(width && height) { 
     width = Math.round(width); 
     height = Math.round(height); 

     image.setSize(width, height); 
    } 
} 

的fitImage功能和setSizeManually：

function fitImage() { 
if (imageImg) { 
    var widthDifference = (imageImg.getWidth() > drawboxWidth) ? imageImg.getWidth()-drawboxWidth : drawboxWidth-imageImg.getWidth(); 
    var heightDifference = (imageImg.getHeight() > drawboxHeight) ? imageImg.getHeight()-drawboxHeight : drawboxHeight-imageImg.getHeight(); 

    var ratio = imageImg.getWidth()/imageImg.getHeight(); 

    if (widthDifference > heightDifference) { 
     //Fit the image horizontally and scale it vertically 
     var newHeight = Math.ceil(drawboxWidth/ratio); 
     var newWidth = drawboxWidth+1; 
    } else { 
     //Fit the image vertically and scale it horizontally 
     var newWidth = Math.round(drawboxHeight * ratio); 
     var newHeight = drawboxHeight+1; 
    } 

    imageImg.setWidth(newWidth); 
    imageImg.setHeight(newHeight); 
    setSizeManually(newWidth, newHeight); 
} 
} 

function setSizeManually(width, height, isSlider) { 
    var stage = imgGroup.getStage(); 
    update(imgGroup.get('.bottomRight')[0], width, height, isSlider); 
    stage.draw(); 
} 

Answer 1

我不能完全告訴你，你該怎麼做，但這裏有雲：

如果你想一個對象移動到的位置，你可以這樣做：

object.setPosition(0,0); 

在你的情況，你的形象被包含在一組，所以我會採取這種做法（與筆記）

function resetImage(imageGroup, resetToX, resetToY){ // give the group and the x,y you want it moved to 
    var groupChildren = imageGroup.getChildren(); // get image and anchors 
    // in your code, the first item added is an image, then four anchor points, from top left clockwise 
    var currentImageWidth = groupChildren[0].getWidth(); // will need this to calculate anchor points position 
    var currentImageHeight = groupChildren[0].getHeight(); // same as above 
    groupChildren[0].setPosition(resetToX, resetToY); // reset the image to this position, you could also do .setAbsolutePosition(resetToX, resetToY); 
    groupChildren[1].setPosition(resetToX, resetToY); //reset topLeft anchor 
    groupChildren[2].setPosition(resetToX+currentImageWidth, resetToY); //reset topRight anchor 
    groupChildren[3].setPosition(resetToX+currentImageWidth, resetToY+currentImageHeight); // reset bottomRight anchor 
    groupChildren[4].setPosition(resetToX, resetToY+currentImageHeight); // reset bottomLeft anchor 
    imageGroup.getLayer().draw(); //redraw layer once everything resets 
}