用Kineticjs编辑形状的位置

如何在形状创建后更改形状的线条？我创建了一个三角形是这样的：用Kineticjs编辑形状的位置

var triangle = new Kinetic.Shape({ 
    drawFunc: function(context) { 
     context.beginPath(); 
     context.moveTo(200, 50); 
     context.lineTo(420, 80); 
     context.lineTo(420, 180); 
     context.lineTo(200, 50); 
     context.closePath(); 
     context.fillStrokeShape(this); 
    }, 
    fill: fillColor, 
    stroke: strokeColor, 
    strokeWidth: strokeWidth 
});

我想坐标跟着我的鼠标之一。我怎样才能改变线的坐标？

来源

2013-09-25 lawls

你有几个选择。

你可以这样重置形状的drawFunc：

triangle.setDrawFunc(function(){…your new drawing…});

但更好的解决方案可能是露出导线作为新属性的形状对象：

var triangle = new Kinetic.Shape({ 
    drawFunc: function(context) { 
     context.beginPath(); 
     context.moveTo(this.lines[0].x,this.lines[0].y); 
     for(var i=1;i<this.lines.length;i++){ 
      context.lineTo(this.lines[i].x,this.lines[i].y); 
     } 
     context.closePath(); 
     context.fillStrokeShape(this); 
    }, 
    fill: fillColor, 
    stroke: strokeColor, 
    strokeWidth: strokeWidth 
}); 
triangle.lines=[];

然后你可以像这样设置形状的线条：

// then set lines 
triangle.lines=[]; 
triangle.lines.push({x:200,y:50}); 
triangle.lines.push({x:420,y:80}); 
triangle.lines.push({x:420,y:180}); 
triangle.lines.push({x:200,y:50});

并重置形状的线条，如下所示：

// and reset the lines 
triangle.lines=[]; 
triangle.lines.push({x:100,y:100}); 
triangle.lines.push({x:200,y:150}); 
triangle.lines.push({x:100,y:200});

还是要遵循mouseXY：

triangle.lines[2] = { x:mouseX, y:mouseY };

[此外]

这里是代码和一个小提琴：http://jsfiddle.net/m1erickson/8ZQ5A/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script> 

<style> 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:400px; 
    height:400px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 400, 
     height: 400 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 


    var triangle = new Kinetic.Shape({ 
     drawFunc: function(context) { 
      context.beginPath(); 
      context.moveTo(this.lines[0].x,this.lines[0].y); 
      for(var i=1;i<this.lines.length;i++){ 
       context.lineTo(this.lines[i].x,this.lines[i].y); 
      } 
      context.closePath(); 
      context.fillStrokeShape(this); 
     }, 
     fill: "skyblue", 
     stroke: "blue", 
     strokeWidth: 3 
    }); 
    triangle.lines=[]; 
    layer.add(triangle); 


    // initially set lines 
    triangle.lines=[]; 
    triangle.lines.push({x:20,y:50}); 
    triangle.lines.push({x:220,y:80}); 
    triangle.lines.push({x:220,y:180}); 
    triangle.lines.push({x:100,y:200}); 

    layer.draw(); 


    $("#change").click(function(){ 

     // reset lines 
     triangle.lines=[]; 
     triangle.lines.push({x:20,y:150}); 
     triangle.lines.push({x:160,y:220}); 
     triangle.lines.push({x:180,y:180}); 
     layer.draw(); 

    }); 


}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <button id="change">Change</button> 
    <div id="container"></div> 
</body> 
</html>

来源

2013-09-25 18:15:54 markE

感谢你为这个。虽然this.lines [0]未定义，但在创建形状之后才能分配属性。我应该如何解决这个问题？ – lawls

直到layer.draw才执行drawFunc。所以，只要您在layer.draw之前指定triangle.lines，您就会好起来的。我已经包含示例代码和小提琴：http://jsfiddle.net/m1erickson/8ZQ5A/顺便说一下，我有我的原始代码中的拼写错误：在循环中，它应该是lineTo不moveTo。 – markE

非常感谢！感谢您花时间帮助我解决这个问题。 – lawls

用Kineticjs编辑形状的位置

回答

相关问题