Kineticjs では、img を四角形にドラッグしたいと考えています。
誰かがそれを行う方法を教えてくれるかどうか疑問に思っていましたか? 図形や画像をドラッグする方法は知っていますが、img を図形にドラッグしたいと考えています。
ありがとう、
Kineticjs では、img を四角形にドラッグしたいと考えています。
誰かがそれを行う方法を教えてくれるかどうか疑問に思っていましたか? 図形や画像をドラッグする方法は知っていますが、img を図形にドラッグしたいと考えています。
ありがとう、
http://jsfiddle.net/Ps3TU/5/は、やりたいことへの第一歩です。
darthVaderImg.on('dragmove', function () {
var userPos = stage.getUserPosition();
if(rectShape.intersects(userPos)){
rectShape.setFillPatternImage(this.getImage());
this.hide();
rectShape.setFillPatternOffset(this.getWidth(), 70);
}
});
しかし、あなたが本当にやりたいのは次のようなものです:http: //jsfiddle.net/8Vdht/3/
darthVaderImg.on('dragmove', function () {
var userPos = stage.getUserPosition();
if(rectShape.intersects(userPos)){
this.setX(rectShape.getX());
this.setY(rectShape.getY());
this.setWidth(rectShape.getWidth());
this.setHeight(rectShape.getHeight());
}
else {
this.setWidth(savedWidth);
this.setHeight(savedHeight);
this.setImage(imageObj);
}
layer.draw();
});
重要なのは、(まだ)長方形の(内側に)画像を配置し、後でそれをすべて簡単に抽出することはできないということです。そのため、画像のサイズを変更して長方形のように見せるためのトリックに頼る必要があります。これにより、画像の位置が修正され、長方形の外側に移動できるようになります。