我正在使用 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);
目前容器看起来像这样
但我想让它像这样..
在第二张图片中，用户可以通过单击容器边框上的任意点并拖动它来扭曲容器。我尝试自己做，但不知道从哪里开始，这个概念叫什么以及如何做实现它。请帮助..
最佳答案
基本原理:
您的底部图像似乎是一组 4 条三次贝塞尔曲线，形成一个矩形。
矩形 Angular 上的正方形设置曲线的起点和终点。
圆圈设置了曲线的 2 个控制点。
如果控制点位于起点和终点之间的假想线上，则曲线将成为连接起点和终点的线段。
如果您添加代码以允许用户拖动起始点、结束点和控制点，您将在底部图像中使用该功能。
您可以使用 Kinetic.Rect、Kinetic.Circle 和 Kinetic.Line 来允许用户拖动控制点。
由于 KineticJS 没有三次贝塞尔曲线形状，因此您必须使用 Kinetic.Shape 根据控制点的位置自定义绘制 4 条曲线。
这是一个简单的示例，其中有 1 个 anchor ，可通过拖动更改右上角:
http://jsfiddle.net/m1erickson/t2mhpmrs/
<!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>
关于javascript - 通过单击并拖动特定边界点来扭曲 Canvas 中的形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25159022/