kinetic.js绝对线位置，而不是相对位置

kinetic.js absolute line position instead of relative position

本文关键字：位置 相对 kinetic js      更新时间：2023-09-27

我正试图根据画布的左上角获得一条线的绝对位置。然而，我似乎只能根据线最初绘制时的位置来获取相对位置（坐标）。

    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。

以下是代码和Fiddle：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>
相关文章：