使用kinetic.js文件

时间:2017-02-15 10:02:53

标签: javascript jquery kineticjs

我在一个任务中工作,动态层想要做一个由kinectic调整大小。图层功能。

例如:

当我点击当时的矩形按钮时,形状的矩形将显示在画布中。

它也在工作,实际上它也是可拖动的。现在,问题是我想要做的形状矩形作为动态可调整大小但是它根据kinectic.js函数不起作用。

为清楚起见,让我们看一下图像

enter image description here

这是我的矩形形状的代码

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");
});

0 个答案:

没有答案