我正在使用我发现的 KineticJS 调整大小并对其进行微调以满足我的需求（http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images / )
其中一个需求是我的用户可以将其图像的位置重置为特定的 X 和 Y 位置，并使图像适合绘图框（由脚本定义。它是中心/中心的框，是部分保存时剪切）。然而; 当我在左上角调整图像大小时，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();
}