1

私は Javascript と Kinetics が初めてで、Kinetics.Js でフリーハンドラインを描画する関数を実装する必要があります。この例を見つけましたが、開始とエンドポイントでのみ機能します。マウスポインターをたどってリアルタイムで描画します...関数を変更したり、新しい座標をプッシュしたりする方法がわかりません...

アイデアはありますか？

var moving = false;


function createLine() {
    line = new Kinetic.Line({
        points: [0, 0, 0, 0],
        stroke: "red",
        strokeWidth: 2,
        id: 'line',
        name: 'line',
        draggable: true
    });
    lineLayer.add(line);
    addHoverEffect(lineLayer, line);
    lineLayer.draw();
}

function drawLine() {
    stage.on("mousedown touchstart", function () {
        createLine();

        if (moving) {
            moving = false;
            lineLayer.draw();
        } else {
            var pos = stage.getPointerPosition();

            //start point and end point are the same
            line.getPoints()[0].x = parseInt(pos.x);
            line.getPoints()[0].y = parseInt(pos.y);
            line.getPoints()[1].x = parseInt(pos.x);
            line.getPoints()[1].y = parseInt(pos.y);

            moving = true;
            lineLayer.drawScene();
        }
    });
    stage.on("mousemove touchmove", function () {
        if (moving) {

            var pos = stage.getPointerPosition();

            line.getPoints()[1].x = parseInt(pos.x);
            line.getPoints()[1].y = parseInt(pos.y);
            moving = true;
            lineLayer.drawScene();
        }
    });
    stage.on("mouseup touchend", function () {
        moving = false;
        removeLineDrawEvents();
    });
}
4

1 に答える 1

3

あなたは正しい軌道に乗っています。さらに知っておくべき情報は次のとおりです。

ステージはマウス イベントを発行しないため、機能しませんstage.on(“mousedown” …)。

代わりに、ステージ全体を埋める背景の四角形を作成します。この背景の四角形は、マウス イベントを発行できます。

var background = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: stage.getWidth(),
    height: stage.getHeight(),
    fill: 'white',
    stroke: 'black',
    strokeWidth: 1,
})

バックグラウンドは、ステージ全体のマウス イベントをリッスンする簡単な方法です。ただし、バックグラウンドなしでステージ マウス イベントをリッスンする方法があります。ここで議論されています: ステージ上のクリックを検出するが、KineticJS の形状ではありません

1 本の線を「ポリライン」に変換するには、線にしたい線分の外部配列を維持し、線の points プロパティをその配列に設定します。

var points=[];
points.push( …another line segment endpoint…);
 myLine.setPoints(points);

あとは今までやってきたことをやりなさい！

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/42RHD/

<!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://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
}
</style>        
<script>
$(function(){

        // create a stage and a layer
        var stage = new Kinetic.Stage({
            container: 'container',
            width: 400,
            height: 400
        });
        var layer = new Kinetic.Layer();
        stage.add(layer);

        // an empty stage does not emit mouse-events
        // so fill the stage with a background rectangle
        // that can emit mouse-events
        var background = new Kinetic.Rect({
            x: 0,
            y: 0,
            width: stage.getWidth(),
            height: stage.getHeight(),
            fill: 'white',
            stroke: 'black',
            strokeWidth: 1,
        })        
        layer.add(background);
        layer.draw();

        // a flag we use to see if we're dragging the mouse
        var isMouseDown=false;
        // a reference to the line we are currently drawing
        var newline;
        // a reference to the array of points making newline
        var points=[];

        // on the background
        // listen for mousedown, mouseup and mousemove events
        background.on('mousedown touchstart', function(){onMousedown();});
        background.on('mouseup touchend', function(){onMouseup();});
        background.on('mousemove touchmove', function(){onMousemove();});

        // On mousedown
        // Set the isMouseDown flag to true
        // Create a new line,
        // Clear the points array for new points
        // set newline reference to the newly created line
        function onMousedown(event) {
            isMouseDown = true;
            points=[];
            points.push(stage.getMousePosition());
            var line = new Kinetic.Line({
                points: points,
                stroke: "red",
                strokeWidth: 5,
                lineCap: 'round',
                lineJoin: 'round'
            });
            layer.add(line);
            newline=line;
        }

        // on mouseup end the line by clearing the isMouseDown flag
        function onMouseup(event) {
            isMouseDown=false;
        }

        // on mousemove
        // Add the current mouse position to the points[] array
        // Update newline to include all points in points[]
        // and redraw the layer
        function onMousemove(event) {
            if(!isMouseDown){return;};
            points.push(stage.getMousePosition());
            newline.setPoints(points);
            layer.drawScene();
        }


}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>
于 2013-04-21T17:32:56.410 に答える