我正在尝试使用 KineticJS 库添加图像调整大小的大小限制。 HTML5 Canvas教程提供了调整图像大小的方法:http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/
但我希望用户无法将图像大小调整为小于 50px x 50px 或大于 200 x 200。 我已经尝试了很多通过以下代码来管理控件。但它显示了非常奇怪的结果
dragBoundFunc: function(pos) {
var newX = '';
var image_width = group.get(".darthVaderImg")[0].getWidth();
var image_height = group.get(".darthVaderImg")[0].getHeight();
var image_position = group.get(".darthVaderImg")[0].getPosition();
if((image_width>50 && image_width< 200) ){
newX = pos.x;
}else{
newX = image_position.x+image_width+80;
}
if((image_height>50 && image_height< 200) ){
newY = pos.y;
}else{
newY = image_position.y+100;
}
return {
x: newX ,
y: newY,
};
}
任何我可以如何做到的例子或想法
最佳答案
http://jsfiddle.net/e4uyG/4/让你非常接近你所要求的。
基本上,您有一个 update() 函数可以重新绘制图像,因此只需将其限制为一定的调整大小即可
function update(group, activeAnchor) {
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];
// update anchor positions
switch (activeAnchor.getName()) {
case "topLeft":
topRight.attrs.y = activeAnchor.attrs.y;
bottomLeft.attrs.x = activeAnchor.attrs.x;
break;
case "topRight":
topLeft.attrs.y = activeAnchor.attrs.y;
bottomRight.attrs.x = activeAnchor.attrs.x;
break;
case "bottomRight":
bottomLeft.attrs.y = activeAnchor.attrs.y;
topRight.attrs.x = activeAnchor.attrs.x;
break;
case "bottomLeft":
bottomRight.attrs.y = activeAnchor.attrs.y;
topLeft.attrs.x = activeAnchor.attrs.x;
break;
}
image.setPosition(topLeft.attrs.x, topLeft.attrs.y);
var width = topRight.attrs.x - topLeft.attrs.x;
var height = bottomLeft.attrs.y - topLeft.attrs.y;
if(height > 50 && height < 200) // Limit the height
image.setHeight(height);
if(width > 50 && width < 200) // Limit the width
image.setWidth(width);
}
关于javascript - HTML5 Canvas 中图像调整大小的限制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14440349/