Question

我正在编写一个应用程序，并使用Kinetic JS库从客户端的计算机加载图像。图像包含在照片对象中，初始化如下

     var photoObj = new Image();

     photoObj.onload = function() {
          var photoImage = new Kinetic.Image({
            x: 0,
            y: 0,
            image: photoObj,
            width: photoObj.width,
            height: photoObj.height,
            name: "photo",
            id: "photo"
          });
      photoGroup.removeChildren();              
      photoGroup.add(photoImage);

该对象包含在名为photoGroup的Kinetic Group对象中，该对象是先前创建的。

photoGroup = new Kinetic.Group({
    x : 0,
    y : 0,
    draggable : true,
    id : "photoGroup"
});

photoLayer = new Kinetic.Layer({
    drawBorder: true
});

photoLayer.add(photoGroup);

stage = new Kinetic.Stage({
    container : "kinetic-kard-preview",
    width : 320,
    height : 480
});

stage.add(photoLayer);
stage.draw();

组对象包含在名为photoLayer的Kinetic Layer对象中，该对象包含在名为stage的Kinetic Stage对象中。

无论如何，我的问题是，现在我想得到图像的屏幕坐标。

我成功获得了舞台的坐标

var containerOffset=$("#kinetic-kard-preview").offset();
var offsetX=containerOffset.left;
var offsetY=containerOffset.top;
console.log(offsetX);//455.859375 
console.log(offsetY);//218

但我似乎无法对图像做同样的事情。当我查看网页的源代码时，我注意到生成的包含图像的画布的html代码是这样的。

<canvas width="320" height="480" style="padding: 0px; margin: 0px; border: 0px; background-color: transparent; width: 320px; height: 480px; position: absolute; background-position: initial initial; background-repeat: initial initial;"></canvas>

如何从客户端的PC加载到画布后获取图像的屏幕坐标？请帮忙！！！谢谢。

感谢您的回答，但似乎无法得到我需要的东西。我刚刚在这里添加了屏幕截图的链接：

enter image description here

正如您在图片中看到的那样，图像的坐标与包含它的舞台的坐标不同。我写了一个mousemove事件并计算出来 - 舞台的x屏幕坐标（即offsetX）与图像的x屏幕坐标之间的距离。 - 舞台的y屏幕坐标（即offsetY）与图像的y屏幕坐标之间的距离。

它们都具有相同的数字.... 24（如屏幕上所示）。通过使用mousemove事件，我手动获取了offsetX，offsetY的值，图像的x和y屏幕坐标为455,218,479和242.

然而，我的问题是如何在从我的电脑上加载图像后自动获取这些数字，尤其是图像的屏幕坐标。我将gPos的值打印到console.log并得到（0,0）值。因此，当我将offsetX和offsetY添加到这些值时，它们是相同的（455,218），而不是（479,242）。请让我知道我现在该怎么办？再次感谢您的帮助。

Answer 1

你的Kinetic.Image在可拖动的Kinetic.Group中位于[0,0]位置。

因此，您可以通过添加：

来获取您的图片位置

＃kinetic-kard-preview offsets
加上当前组位置：group.position（）

[为KineticJS 4.5.1版添加代码]

以下是v4.5.1和演示的示例代码：http://jsfiddle.net/m1erickson/NXH9X/

<!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.5.1.min.js"></script>
<style>
body{padding:20px; background:ivory;}
#kinetic-kard-preview{
  margin-top: 10px;
  width:350px;
  height:350px;
  border:1px solid gray;
}
#target{position:absolute;top:200px;left:150px;opacity:0.50;}
</style>        
<script>
$(function(){

//
$pos=$("#results");

//
var containerOffset=$("#kinetic-kard-preview").offset();
var offsetX=containerOffset.left;
var offsetY=containerOffset.top;

//
var stage = new Kinetic.Stage({
    container: 'kinetic-kard-preview',
    width: 350,
    height: 350
});

//
photoLayer = new Kinetic.Layer({
    drawBorder: true
});
stage.add(photoLayer);

//
photoGroup = new Kinetic.Group({
    x : 0,
    y : 0,
    draggable : true,
    id : "photoGroup"
});
photoGroup.on("dragmove",function(){
    var gPos=photoGroup.getPosition();
    var x=parseInt(offsetX+gPos.x);
    var y=parseInt(offsetY+gPos.y);
    $pos.text("photoImage: screenX="+x+", screenY="+y);
});
photoLayer.add(photoGroup);

//
 var photoObj = new Image();
 photoObj.onload = function() {
    var photoImage = new Kinetic.Image({
      x: 0,
      y: 0,
      image: photoObj,
      width: photoObj.width,
      height: photoObj.height,
      name: "photo",
      id: "photo"
    });
    photoGroup.add(photoImage);
    photoLayer.draw();
}
photoObj.src="https://dl.dropboxusercontent.com/u/139992952/multple/norwayFlag.jpg";


}); // end $(function(){});
</script>       
</head>
<body>
    <h4>Semi-transparent flag is at screen position 150,200</h4>
    <p id=results>Drag the opaque flag and see screen position</p>
    <img id=target src='https://dl.dropboxusercontent.com/u/139992952/multple/norwayFlag.jpg'>
    <div id="kinetic-kard-preview"></div>
</body>
</html>

在Javascript中获取动力学图像的屏幕坐标？

1 个答案: