0

创建形状后如何更改形状的线条？我这样创建一个三角形：

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

我想要一个坐标跟随我的鼠标。如何更改线条的坐标？

4

1 回答 1

1

你有几个选择。

您可以像这样重置形状的 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});

或者跟随鼠标XY：

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-25T18:15:54.073 回答