我在一个任务中工作,动态层想要做一个由kinectic调整大小。图层功能。
例如:
当我点击当时的矩形按钮时,形状的矩形将显示在画布中。
它也在工作,实际上它也是可拖动的。现在,问题是我想要做的形状矩形作为动态可调整大小但是它根据kinectic.js
函数不起作用。
为清楚起见,让我们看一下图像
这是我的矩形形状的代码
function addShape(w,h,c){
var layerRect = new Kinetic.Layer();
layerRect.add(new Kinetic.Rect({
x:0,
y:0,
width:w,
height:h,
fill: c,
draggable: true
}));
stage.add(layerRect);
var kShaped;
var startRight=-1;
var startWidth=0;
var startHeight=0;
$(stage.getContent()).on('mousedown', function (event) {
var pos=stage.getPointerPosition();
var mouseX=parseInt(pos.x);
var mouseY=parseInt(pos.y);
var ipos=layerRect.position();
var isize=layerRect.getSize();
var right=ipos.x+isize.width;
if(mouseX>right-10 && mouseX<right+10){
startRight=mouseX;
startWidth=isize.width;
startHeight=isize.height;
}
});
$(stage.getContent()).on('mouseup', function (event) {
startRight=-1;
});
$(stage.getContent()).on('mousemove', function (event) {
if(startRight>=0){
var pos=stage.getPointerPosition();
var mouseX=parseInt(pos.x);
var mouseY=parseInt(pos.y);
var dx=mouseX-startRight;
var scaleFactor=(mouseX-(startRight-startWidth))/startWidth;
layerRect.width(startWidth*scaleFactor);
layerRect.height(startHeight*scaleFactor);
layer.draw();
}
});
}
//This click function is for create rectangle shape
$("#textsubmitShape").live("click",function(){
addShape(200,100,"Green");
});