如何使HTML5畫布形狀可調整大小

Question

退房：http://jsfiddle.net/aqaP7/4/，

和

http://shedlimited.debrucellc.com/test3/canvaskinclip.html，

我要讓HTML5圖像可調整大小， 並且它需要基於HTML5等，因爲我的剪輯區域是在html5

我認爲這將與mousedown事件有關，但例如我可以告訴如果 鼠標是在角落的形狀？我可以將代碼添加到我的圈子 - mousedown函數嗎？

circle.on("mousedown", function(){ 
      draggingShape = this; 
      var mousePos = stage.getMousePosition(); 
      draggingRectOffsetX = mousePos.x - circle._x; 
      draggingRectOffsetY = mousePos.y - circle._y; 
     }); 
     circle.on("mouseover", function(){ 
      document.body.style.cursor = "pointer"; 
     }); 
     circle.on("mouseout", function(){ 
      document.body.style.cursor = "default"; 
     }); 

     layer.add(circle); 

     stage.on("mouseout", function(){ 
      draggingShape = undefined; 
     }, false); 

     stage.on("mousemove", function(){ 
      var mousePos = stage.getMousePosition(); 
      if (draggingShape) { 
       draggingShape._x = mousePos.x - draggingRectOffsetX; 
       draggingShape._y = mousePos.y - draggingRectOffsetY; 

       layer.draw(); 
      } 

Answer 1

看看這個帆布教程：

Take a look at this tutorial

下面是一些簡單的代碼，讓你開始：

var anchor; 

function addAnchor(group, x, y, name) { 
    var stage = group.getStage(); 
    var layer = group.getLayer(); 

    anchor = new Kinetic.Circle({ 
    x: x, 
    y: y, 
    stroke: "#666", 
    fill: "#ddd", 
    strokeWidth: 2, 
    radius: 8, 
    name: name, 
    draggable: true 
    }); 

    anchor.on("dragmove", function() { 
    update(group, this); 
    layer.draw(); 
    }); 
    anchor.on("mousedown touchstart", function() { 
    group.setDraggable(false); 
    this.moveToTop(); 
    }); 
    anchor.on("dragend", function() { 
    group.setDraggable(true); 
    layer.draw(); 
    }); 
    // add hover styling 
    anchor.on("mouseover", function() { 
    var layer = this.getLayer(); 
    document.body.style.cursor = "pointer"; 
    this.setStrokeWidth(4); 
    layer.draw(); 
    }); 
    anchor.on("mouseout", function() { 
    var layer = this.getLayer(); 
    document.body.style.cursor = "default"; 
    this.setStrokeWidth(2); 
    layer.draw(); 
    }); 

    group.add(anchor); 
} 

本質上講，你要錨添加到點擊形狀，然後使用這些錨點來調整大小。