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

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

javascript jquery html

Javascript 通过单击并拖动特定边界点来扭曲画布中的形状,javascript,jquery,html,kineticjs,Javascript,Jquery,Html,Kineticjs,我正在使用HTML5和kinetic js创建一个平面图应用程序。目前，我能够创建一个矩形容器，在其中可以拖放对象。你可以在这个链接中看到它的作用创建它的js代码是 //create a group var group = new Kinetic.Group({ draggable: true //make group draggable }); var rec = new Kinetic.Rect({ x: 10, y: 330, width:

我正在使用HTML5和kinetic js创建一个平面图应用程序。目前，我能够创建一个矩形容器，在其中可以拖放对象。你可以在这个链接中看到它的作用

创建它的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);

当前容器看起来像这样

但我想让它变成这样

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

如何完成的基本知识：

底部图像显示为一组4条立方贝塞尔曲线，形成一个矩形

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

这些圆设置了曲线的两个控制点

如果控制点位于起点和终点之间的假想线上，则曲线将成为连接起点和终点的线段

如果添加代码以允许用户拖动起始点、结束点和控制点，则在底部图像中将具有该功能

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

由于KineticJS没有三次Bezier曲线形状，因此必须使用Kinetic.shape根据控制点的位置自定义绘制4条曲线

下面是一个简单的示例，其中1个锚点通过拖动改变右上角：


原型
正文{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：350px；
高度：350px；
}
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：350
});
var layer=新的动能层（）；
阶段。添加（层）；
var g=新的动力学组({
x:100，y:100，
});
层。添加（g）；
var房间=新的动能形状({
x:0,，
y:0，
宽度：100，
身高：100，
笔画：“蓝色”，
填充：“红色”，
drawFunc:函数（上下文）{
var x=this.x（）；
var y=this.y（）；
var w=this.width（）；
var h=这个.height（）；
var right=anchorTR.x（）；
var top=anchorTR.y（）；
context.beginPath（）；
上下文。移动到（x，y）；
//顶
背景。贝塞尔曲线图（x+w/3，y，x+w*2/3，y，右，顶部）；
//对
贝塞尔曲线（x+w，y+h/3，x+w，y+h*2/3，x+w，y+h）；
//底部
贝塞尔曲线（x+w*2/3，y+h，x+w/3，y+h，x，y+h）；
//左
贝塞尔曲线（x，y+h*2/3，x，y+h/3，x，y）；
context.fillStrokeShape（本）；
}
});
g、 增加（房间）；
var anchorTR=新的动力学圆({
x:100，
y:0，
半径：8，
填充：“绿色”，
笔画：“黑色”，
冲程宽度：1，
德拉格布尔：是的
});
g、 添加（主播）；
layer.draw（）；
}); // end$（函数（）{}）；
拖动绿色圆圈以更改红色矩形

问题中的第二幅图像每侧有4个控制点。我如何在每侧添加更多控制点？？用与第一幅图像相同的方法添加其他3个控制点…继续编码！我已经在您提供的js fiddle链接中为其余3个顶点添加了锚定点。由于没有保存选项，我想在注释部分将链接添加到答案中，因此如何保存该代码。单击顶部菜单上的“Fork”选项。这会将代码复制到您帐户下的新文件中。然后你可以在你的fiddle帐户下进行“保存”。干杯我已经在正方形的所有顶点上添加了锚定点，以在每一侧添加n个锚定点。我需要遵循相同的步骤还是其他方法？？

<!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>