Javascript kinetic.js绝对线位置而非相对位置_Javascript_Jquery_Html_Canvas_Kineticjs

Javascript kinetic.js绝对线位置而非相对位置

javascript jquery html canvas

Javascript kinetic.js绝对线位置而非相对位置,javascript,jquery,html,canvas,kineticjs,Javascript,Jquery,Html,Canvas,Kineticjs,我试图根据画布的左上角获得直线的绝对位置。但是，我似乎只能根据最初绘制直线时的位置返回相对位置（坐标） var line = new Kinetic.Line({ points: [521, 27, 465, 99], stroke: '#ff0000', strokeWidth: 10, draggable: true }); 是否有任何方法可以基于画布的（0,0）左上角坐标获取直线的绝对坐标？我知道你可以得到一

我试图根据画布的左上角获得直线的绝对位置。但是，我似乎只能根据最初绘制直线时的位置返回相对位置（坐标）

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

是否有任何方法可以基于画布的（0,0）左上角坐标获取直线的绝对坐标？我知道你可以得到一条路径的绝对坐标，但是对于我要做的，我想用一条直线。任何帮助都是非常感谢的，我希望答案不是不能做到

假设直线上所需的参考点是点[]中的第一个x/y，则可以获得直线相对于画布左上角的位置，如下所示：

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

或者，如果需要直线边界框的位置，则必须首先迭代每个点并获取直线最左上角的XY

下面是代码和小提琴：


原型
正文{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：350px；
高度：350px；
}
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：350
});
var layer=新的动能层（）；
阶段。添加（层）；
var$results=$（“#results”）；
var线=新的动能线({
分数：[121,27,165,99]，
笔划：'#ff0000'，
冲程宽度：10，
德拉格布尔：是的
});
var point=line.getPoints（）[0]；
line.originalX=点x；
line.originalY=点.y；
第.on行（“dragmove”，function（））{
$results（（this.getX（）+this.originalX）+“/”+（this.getY（）+this.originalY））；
});
图层。添加（行）；
layer.draw（）；
}); // end$（函数（）{}）；
结果

嘿，谢谢。我能用你的答案找到我的解决办法。事实证明，对于我正在做的事情，我只需要找到直线上一点的绝对位置就可以了。所以你关于线上某一点的回答起了作用。

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