Question

我正在使用HTML5和kinetic js创建平面图应用程序。目前，我可以创建一个矩形容器，您可以在其中拖放对象。您可以在此链接http://jsfiddle.net/wQ8YA/29/

中查看其实际操作

创建它的js代码是..

//create a group
var group = new Kinetic.Group({
draggable: true //make group draggable
});
var rec = new Kinetic.Rect({
        x: 10,
        y: 330,
        width: 600,
        height: 600
         });
group.add(rec);

目前容器看起来像这样

floor-plan

但我想这样做..

new floor plan

在第二张图片中，用户可以通过点击容器边框上的任意点并拖动它来扭曲容器。我尝试自己做，但不知道从哪里开始，这个概念叫做什么如何实现它。请帮助..

Answer 1

如何完成的基础知识

您的底部图像看起来是一组形成矩形的4立方贝塞尔曲线。

矩形角上的方块设置曲线的起点和终点。

圆圈设置曲线的2个控制点。

如果控制点位于起点和终点之间的虚线上，则曲线变为连接起点和终点的线段。

如果您添加代码以允许用户拖动起点，终点和控制点，您将在底部图像中使用该功能。

您可以使用Kinetic.Rect，Kinetic.Circle和Kinetic.Line来允许用户拖动控制点。

由于KineticJS没有Cubic Bezier曲线形状，您必须使用Kinetic.Shape根据控制点的位置自定义绘制4条曲线。

这是一个简单的示例，其中包含一个拖动改变右上角的锚点：

http://jsfiddle.net/m1erickson/t2mhpmrs/

enter image description here

<!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 g=new Kinetic.Group({
        x:100,y:100,
    });
    layer.add(g);


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

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


    layer.draw();


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

</script>       
</head>
<body>
    <h4>Drag green circle to change red rect</h4>
    <div id="container"></div>
</body>
</html>

通过单击并拖动特定边界点来扭曲“画布”中的形状

1 个答案: