KineticJS Mausposition des Bildes

Ich habe ein Bild wie diesesKineticJS Mausposition des Bildes

var image = new Kinetic.Image({ 
      x : x, 
      y : y, 
      width : 1000, 
      height :100, 
      image : image, 
});

Wie kann ich die Position der Maus auf das Bild, basierend bekommen. dieses Beispiel nach, ich Position Objekt erhalten könnte {0, 0} ~ {100, 1000}

Ich fand nur eine api stage.getPointerPosition()

Quelle

2017-01-13 Jay

Wenn Sie auf click Mausposition Sie erhalten dann dies tun kann:

image.on('click', function(){ 
    var mousePos = youStage.getPointerPosition(); 
    var p = { x: mousePos.x, y: mousePos.y }; // p is a clone of mousePos 
    var r = image.getAbsoluteTransform().copy().invert().point(mousePos); 
});

sie finden das Arbeitsbeispiel unten, wenn auch es verwendet KonvaJS aber das Konzept ist das gleiche. Außerdem sollten Sie Konva verwenden, da es gut gewartet und dokumentiert ist.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://cdn.rawgit.com/konvajs/konva/1.4.0/konva.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>Konva Image Demo</title> 
 
    <style> 
 
    body { 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #F0F0F0; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="container"></div> 
 
    <script> 
 
    var width = window.innerWidth; 
 
    var height = window.innerHeight; 
 
    var stage = new Konva.Stage({ 
 
     container: 'container', 
 
     width: width, 
 
     height: height 
 
    }); 
 
    var layer = new Konva.Layer(); 
 
    var imageObj = new Image(); 
 
    imageObj.onload = function() { 
 
     var yoda = new Konva.Image({ 
 
     x: 50, 
 
     y: 50, 
 
     image: imageObj, 
 
     width: 106, 
 
     height: 118 
 
     }); 
 
     yoda.on('click', function() { 
 
     var mousePos = stage.getPointerPosition(); 
 
     var p = { 
 
      x: mousePos.x, 
 
      y: mousePos.y 
 
     }; // p is a clone of mousePos 
 
     var r = yoda.getAbsoluteTransform().copy().invert().point(mousePos); 
 
     console.log(r); 
 
     }); 
 
     // add the shape to the layer 
 
     layer.add(yoda); 
 
     // add the layer to the stage 
 
     stage.add(layer); 
 
    }; 
 
    imageObj.src = 'https://upload.wikimedia.org/wikipedia/en/thumb/9/9b/Yoda_Empire_Strikes_Back.png/220px-Yoda_Empire_Strikes_Back.png'; 
 
    </script> 
 
</body> 
 

 
</html>

Quelle

2017-02-09 04:08:58

Dank hatte ich andere Art und Weise, dies zu tun, mit stage.getPointerPosition() + Offset (x, y) die richtige Position zu berechnen. Ich werde versuchen, die GetAbsoluteTransform(). Kopieren(). Invertieren(). Point (MausPos); ist es das gleiche Ergebnis. – Jay

Bitte beachten Sie diese http://stackoverflow.com/questions/14994079/how-to-get-the-position-of-a-click-event-relative-to-its-layer-in-kineticjs –

Danke. Übrigens, ist KonvaJS die neue Version von KineticJS? Ich werde versuchen, Code nach KonvaJs zu verschieben, – Jay

KineticJS Mausposition des Bildes

Antwort

Verwandte Themen