0

私は2つの長方形を持つ単純なkineticjsプログラムを持っています。1つは「rect」と呼ばれ、もう1つは「grow」と呼ばれます。ユーザーが「成長」をクリックしてドラッグすると、他の長方形を成長させたいと思います。したがって、grow でマウスダウンを取得すると、grow rect で「on mousemove」を実行します (レイヤーとステージも試しました)。これは、ユーザーがマウスをすばやく動かし、マウスが成長長方形の外に移動することを除いて、正常に機能します。「mousemove」機能をレイヤーとステージに配置しようとしましたが、マウスが成長ボックスを離れた後でも成長を継続できるようになることを期待していますが、うまくいかないようです。

コード全体は次のとおりです。

<html>
<body>

<br>debug:
<div id="debug">start</div>
<div id="container"></div>

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>

<script defer="defer">
var stage = new Kinetic.Stage({
        container: 'container',
        width: 500,
        height: 500
      });
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
    x : 10,
    y : 10,
    width : 90,
    height : 90,
    fill : "green"
});
var grow = new Kinetic.Rect({
    x : 80,
    y : 80,
    width : 20,
    height : 20,
    fill : "red"
});
layer.add(rect);
layer.add(grow);
layer.draw();
stage.add(layer);
stage.draw();

var anchor = 0

function debug(s) {
    var div = document.getElementById("debug");
    div.innerHTML = s;
}

function doGrow() {
    debug("doGrow");
    var mousePos = stage.getMousePosition();
        var dx = mousePos.x - anchor.x;
        var dy = mousePos.y - anchor.y;
    rect.setWidth(rect.getWidth() + dx);
    rect.setHeight(rect.getHeight() + dy);
    grow.setX(grow.getX() + dx);
    grow.setY(grow.getY() + dy);
    anchor = mousePos;
    layer.draw();
}

grow.on('mousedown', function(e) {
    debug("down");
    anchor = stage.getMousePosition();
    //grow.on('mousemove', doGrow);      // These are my three attempts
    //layer.on('mousemove', doGrow);
    stage.on('mousemove', doGrow);
});
</script>
</body>
</html>

つまり、ユーザーの動きが速すぎて、成長関数が呼び出され続けないことを除いて、それは機能します。

どんな助けでも大歓迎です。ありがとうございました。

4

1 に答える 1