我使用KineticJS调整大小，我发现并调整它以满足我的需求（http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/）
其中一个需求是我的用户可以将图像的位置重置为特定的X和Y位置，并使图像适合绘图框（由脚本定义。它是＆＃39的框; 39; s中心/中心，是保存时切出的部分）。然而;当我在左上角调整图像大小时，X和Y变为负数。因此，如果我希望我的用户能够将他们的图像重置为，那就说0,0。在使用topLeft锚点调整大小后，0，0行将关闭。
有没有办法通过另一种方式锻炼到0,0线。或者也许使用该组或将其所在的图像作为基线？
舞台初始化（它在边框周围绘制4个矩形以匹配绘图框。除了中心/中心的一个方框外，所有内容都将被覆盖，这将是保存时图像的切口。
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();
}
答案 0 :(得分：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
}