如果我有一条动力线
例如:
line = new Kinetic.Line({
x: 80,
y:80,
points: [10, 10, 60, 60, 60-headlen*Math.cos(angle-Math.PI/6),60-headlen*Math.sin(angle-Math.PI/6),60, 60, 60-headlen*Math.cos(angle+Math.PI/6),60-headlen*Math.sin(angle+Math.PI/6)],
stroke: "green",
// draggable: true,
strokeWidth: 4,
name: "letter_arrow",
offset: [140,140]
});
并说出一些圆圈
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: 'red',
fill: 'white',
strokeWidth: 2,
radius: 8,
name: name,
draggable: false,
dragOnTop: false,
//TODO SET THIS TO 0!!!!!
opacity: 1
});
其中 x 和 y 是直线的前 2 个点 (10,10) 和 (60,60)
如何使圆圈拖动边界，以便它们只能在通过前两个点 (10,10) 和 (60,60) 的假想线上拖动 我阅读了有关拖动边界的教程，但我有不知道也许你可以帮助我
问候
最佳答案
您可以添加自定义的dragBoundFunc来将 anchor 移动限制为一条线:
// dragBoundFunc will constrain your shape to your desired x/y
// you receive the current mouse position in pos.x and pos.y
// you return the x/y where you want the shape to be located
dragBoundFunc: function(pos) {
// get the mouse x position
var x=pos.x;
// if the mouse is left or right of the line
// force the anchor to the far-left or far-right of the line
if(x<lineMinX){ return({ x:lineMinX, y:lineMinY}); }
if(x>lineMaxX){ return({ x:lineMaxX, y:lineMaxY}); }
// if the mouse between the left and right points of the line
// calc the desired y-position based on the formula: y = lineSlope * x + lineB
return({x:x,y:lineSlope*x+lineB});
}
这是代码和 fiddle :http://jsfiddle.net/m1erickson/UHwW9/
<!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.2.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:300px;
height:300px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
stage.add(layer);
var x1=10;
var y1=10;
var x2=60;
var y2=60;
var line=new Kinetic.Line({
points:[x1,y1,x2,y2],
stroke:"gray"
});
layer.add(line);
var anchor1=newAnchor(x1,y1,x2,y2);
function newAnchor(x1,y1,x2,y2){
var anchor = new Kinetic.Circle({
x: x1,
y: y1,
radius: 8,
fill: 'skyblue',
stroke: 'lightgray',
strokeWidth: 3,
draggable:true,
dragBoundFunc: function(pos) {
var x=pos.x;
if(x<this.minX){
return({x:this.minX,y:this.minY});
}
if(x>this.maxX){
return({x:this.maxX,y:this.maxY});
}
return({x:x,y:this.slope*x+this.b});
}
});
// dragBoundFunc stuff
anchor.minX=x1;
anchor.minY=y1;
anchor.maxX=x2;
anchor.maxY=y2;
anchor.slope=(y1-y2)/(x1-x2);
anchor.b=y1/(anchor.slope*x1);
//
layer.add(anchor);
layer.draw();
return(anchor);
}
}); // end $(function(){});
</script>
</head>
<body>
<button id="rotateBtn">rotate</button>
<div id="container"></div>
</body>
</html>
关于javascript - Kinetic JS Dragbound功能限制线上拖动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19564279/