[英]kinetic.js absolute line position instead of relative position
I am trying to get the absolute position of a line based on the canvas's top left corner. 我试图根据画布的左上角获得一条线的绝对位置。 However, I can only seem to get back the relative position(coordinates) based on the position of the line when it was originally drawn.
但是,我似乎只能根据最初绘制线条时的位置来恢复相对位置(坐标)。
var line = new Kinetic.Line({
points: [521, 27, 465, 99],
stroke: '#ff0000',
strokeWidth: 10,
draggable: true
});
Is there any way to get the absolute coordinates of the line based on the canvas's (0,0) top left coordinates? 有没有办法根据画布的(0,0)左上角坐标得到线条的绝对坐标? I know you can get the absolute coordinates of a path, but for what I am trying to do, I would like to use a line.
我知道你可以获得路径的绝对坐标,但是对于我想要做的事情,我想使用一条线。 Any help is appreciated and I hope the answer is not that it can't be done.
任何帮助表示赞赏,我希望答案不是它无法完成。
Assuming your desired reference point on your line is the first x/y in points[], you can get the line's position relative to the top-left canvas corner like this: 假设您的线上所需的参考点是点[]中的第一个x / y,您可以获得相对于左上角画布角的线的位置,如下所示:
Save the original XY of that reference point as new properties on the line 将该参考点的原始XY保存为该行的新属性
Listen to the dragmove event and add that original XY back to the current getX/getY 收听dragmove事件并将原始XY添加回当前的getX / getY
Results: position of the line relative to canvas [0,0] 结果:线相对于画布的位置[0,0]
Alternatively, if you wanted the position of your line's bounding box, you must first iterate through each point and fetch the line's top-left most XY. 或者,如果您想要线的边界框的位置,则必须首先遍历每个点并获取线的左上角最XY。
Here's code and a Fiddle: http://jsfiddle.net/m1erickson/jELRL/ 这是代码和小提琴: http : //jsfiddle.net/m1erickson/jELRL/
<!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>
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 $results=$("#results");
var line = new Kinetic.Line({
points: [121, 27, 165, 99],
stroke: '#ff0000',
strokeWidth: 10,
draggable: true
});
var point=line.getPoints()[0];
line.originalX=point.x;
line.originalY=point.y;
line.on("dragmove",function(){
$results((this.getX()+this.originalX)+"/"+(this.getY()+this.originalY));
});
layer.add(line);
layer.draw();
}); // end $(function(){});
</script>
</head>
<body>
<p id="results">Results</p>
<div id="container"></div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.