Question

我在动力学js中制作了一个Bezier形状，顶点上有控制点。代码允许用户拖动起点，终点和控制点，从而修改曲线的形状，如下所示。

Anchor points

包含上述代码的js小提琴的链接是http://jsfiddle.net/Lucy1/da90vct4/2/

锚点的代码是

 var room = new Kinetic.Shape({
x: 0,
y: 0,
width: 100,
height: 100,
stroke: "black",
fill: 'ivory',
drawFunc: function (context) {
    var x = this.x();
    var y = this.y();
    var w = this.width();
    var h = this.height();
    var trX = anchorTR.x();
    var trY = anchorTR.y();
    var brX = anchorBR.x();
    var brY = anchorBR.y();
    var blX = anchorBL.x();
    var blY = anchorBL.y();
    var tlX = anchorTL.x();
    var tlY = anchorTL.y();
    context.beginPath();
    context.moveTo(tlX, tlY);
    // top
    context.bezierCurveTo(x + w / 3, y, x + w * 2 / 3, y, trX, trY);
    // right
    context.bezierCurveTo(x + w, y + h / 3, x + w, y + h * 2 / 3, brX, brY);
    // bottom
    context.bezierCurveTo(x + w * 2 / 3, y + h, x + w / 3, y + h, blX, blY);
    // left
    context.bezierCurveTo(x, y + h * 2 / 3, x, y + h / 3, tlX, tlY);

    context.closePath();
    context.fillStrokeShape(this);
    }
    });

    g.add(room);


   var anchorTR = new Kinetic.Circle({
   x: 100,
   y: 0,
   radius: 8,
   fill: "green",
   stroke: 'black',
   strokeWidth: 1,
   draggable: true
   });
   g.add(anchorTR);

 var anchorBR = new Kinetic.Circle({
x: 100,
y: 100,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorBR);

var anchorBL = new Kinetic.Circle({
x: 0,
y: 100,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorBL);

var anchorTL = new Kinetic.Circle({
x: 0,
y: 0,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorTL);

layer.draw();

目前，我为定位点定义了多个动力学圈，为定位定位点定义了多个变量。我试图以这样的方式优化代码，即我可以多次重复使用代码而不使用循环，但无法......请帮助..

Answer 1

您可以通过将代码封装到函数中并添加一些引用来使代码可重用。

放置创建群组的代码＆amp;进入一个功能室并从该功能返回新房间。
将创建锚点的代码放入函数中，并从该函数返回新锚点。
将房间锚点的引用附加到房间节点本身。

enter image description here

以下是代码重构和演示：http://jsfiddle.net/m1erickson/opsy1pn9/

<!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-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

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


    var room1=makeRoom(50,50,50,50);
    var room2=makeRoom(150,150,50,50);


    function makeRoom(x,y,w,h){

        var g=new Kinetic.Group({x:x,y:y,draggable:true});
        layer.add(g);

        var room=new Kinetic.Shape({
          x:0,
          y:0,
          width:w,
          height:h,
          stroke:"blue",
          fill: 'red',
          drawFunc: function(context) {
            var x=this.x();
            var y=this.y();
            var w=this.width();
            var h=this.height();
            var tlX=this.anchorTL.x();
            var tlY=this.anchorTL.y();
            context.beginPath();
            context.moveTo(tlX,tlY);
            // top
            context.bezierCurveTo(x+w/3,y, x+w*2/3,y, this.anchorTR.x(),this.anchorTR.y());
            // right
            context.bezierCurveTo(x+w,y+h/3, x+w,y+h*2/3, this.anchorBR.x(),this.anchorBR.y());
            // bottom
            context.bezierCurveTo(x+w*2/3,y+h, x+w/3,y+h, this.anchorBL.x(),this.anchorBL.y());
            // left
            context.bezierCurveTo(x,y+h*2/3, x,y+h/3, tlX,tlY);

            context.closePath();
            context.fillStrokeShape(this);
          }
        });

        g.add(room);

        room.anchorTR=makeAnchor(w,0,g);
        room.anchorBR=makeAnchor(w,h,g);
        room.anchorBL=makeAnchor(0,h,g);
        room.anchorTL=makeAnchor(0,0,g);

        layer.draw();
    }

    function makeAnchor(x,y,group){
        var anchor=new Kinetic.Circle({
            x:x,
            y:y,
            radius:8,
            fill:"green",
            stroke: 'black',
            strokeWidth: 1,
            draggable: true
        });
        group.add(anchor);
        anchor.moveToTop();
        return(anchor);
    }

}); // end $(function(){});
</script>       
</head>
<body>
    <h4>Drag green circle to change red rect</h4>
    <div id="container"></div>
</body>
</html>

画布形状有控制点

1 个答案: