kinetic.js 绝对行位置而不是相对位置答案

【问题标题】：kinetic.js absolute line position instead of relative positionkinetic.js 绝对行位置而不是相对位置
【发布时间】：2013-12-10 15:42:36
【问题描述】：

我正在尝试根据画布的左上角获取线条的绝对位置。但是，我似乎只能根据最初绘制线条时的位置来取回相对位置（坐标）。

    var line = new Kinetic.Line({
        points: [521, 27, 465, 99],
        stroke: '#ff0000',
        strokeWidth: 10,
        draggable: true
    });

有没有什么方法可以根据画布的 (0,0) 左上角坐标获取线条的绝对坐标？我知道您可以获得路径的绝对坐标，但对于我想要做的事情，我想使用一条线。任何帮助表示赞赏，我希望答案不是无法完成。

【问题讨论】：

标签： javascript jquery html canvas kineticjs

【解决方案1】：

假设你想要的参考点是点[] 中的第一个 x/y，你可以像这样获得相对于画布左上角的线的位置：

将该参考点的原始 XY 保存为线上的新属性
监听 dragmove 事件并将原来的 XY 添加回当前的 getX/getY
结果：线条相对于画布 [0,0] 的位置

或者，如果您想要线条边界框的位置，您必须首先遍历每个点并获取线条最左上角的 XY。

这是代码和小提琴：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>

【讨论】：

嘿，谢谢。我能够使用您的答案找到我的解决方案。原来我在做什么，我只需要找到要使用的线的一点的绝对位置。因此，您对在线点的回答起到了作用。