1

KineticJS を使用して描画アプリケーションを実装しています。私はそれを使って形や直線を描きました。KineticJS - Drawing Lines with Mouseで説明されている方法を使用して、直線を描画しました。しかし今、私の要件は、マウスのパスに沿って線を引くことです! そのための手続きはどうすればよいですか？Kinetic.Path を使用してそれを行うことはできますか?

次のコードは、直線を描画するために使用されます。

    var Object,startingPoint;
    var down = false;

    layer.on("mousedown", function(e) {
        down = true;
        Object = new Kinetic.Line({
            points: [e.layerX, e.layerY,e.layerX+1, e.layerY+1],
            stroke: "red"
        });

        layer.add(Object);
    });

    layer.on("mousemove", function(e) {
         if (down) {
                var x = e.layerX;
                var y = e.layerY;
                Object.getPoints()[1].x = e.layerX;
                Object.getPoints()[1].y = e.layerY;
                down = true;
                layer.draw();
         }        
    });

    layer.on("mouseup", function(e) {
        down = false;
    });

目標を達成するために、Kinetic.Line を Kinetic.Path に置き換えました。しかし、うまくいきませんでした。

4

2 に答える 2

0

線に点を追加する必要がある場合は、次のようにします。

  var points = line.getPoints();
  var pos = stage.getUserPosition();
  points = points.push(pos.x, pos.y);
  line.setPoints(points);
于 2013-03-25T15:07:10.700 に答える
0

ここで私がそれをどのように実装したか。重要なのは、kineticJS のスプライン形状を使用し、mousemove および mouseup 中にその中のポイントを押すことです。ev._x、ev._y は、 周囲の要素が存在しない場合にキャンバス内のマウス位置を追跡するこの記事に照らして計算された x および y ポイントです。

それが役立つかどうか教えてください

    tools.pencil = function () {
    var tool = this;
    this.started = false;
    var drawObject;

    this.mousedown = function (ev) {
     drawObject = new DrawObject();
     drawObject.Tool = DrawTool.Pencil;
     tool.started = true;
     drawObject.currentState = DrawState.Started;
     drawObject.StartX = ev._x;
     drawObject.StartY = ev._y;
     tool.DrawIt(drawObject);

   };

    this.mousemove = function (ev) {
        if (tool.started) {
           drawObject.currentState = DrawState.Inprogress;
           drawObject.CurrentX = ev._x;
           drawObject.CurrentY = ev._y;
           tool.DrawIt(drawObject);


    };

    this.mouseup = function (ev) {
        if (tool.started) {
            tool.started = false;
            drawObject.currentState = DrawState.Completed;
             drawObject.CurrentX = ev._x;
            drawObject.CurrentY = ev._y;
           tool.DrawIt(drawObject);
       }
    };

    this.mouseout = function (ev) {
        if (tool.started) {
        }
        tool.started = false;

    };


    this.DrawIt = function (drawObject) {

            switch (drawObject.currentState) {
                case DrawState.Started:
                    var x= drawObject.StartX, 
                        y = drawObject.StartY;
                    var pencil = new Kinetic.Spline({
                        points: [{
                            x: x,
                            y: y
                        }],
                        stroke: 'red',
                        strokeWidth: 2,
                        lineCap: 'round',
                        tension: 1,
                        name: shapes.length
                    });

                    drawObject.Shape = pencil;
                    layer.add(pencil);
                    layer.draw();


                    break;
                case DrawState.Inprogress:
                case DrawState.Completed:
                    var x = drawObject.CurrentX,
                        y = drawObject.CurrentY;

                    var pencil = drawObject.Shape;
                    pencil.attrs.points.push({ x: x, y: y });
                    pencil.setPoints(pencil.attrs.points);
                    layer.draw();
                    if (drawObject.currentState == DrawState.Completed) {
                        // dosomething
                    }

                    break;
            }

描画オブジェクトはJavaScriptの単純な空の関数です

function DrawObject()
{
}

drawstate は鉛筆ツールのすべての利用可能な状態です

var DrawState =
{
 Started: 0,
 Inprogress: 1,
 Completed: 2
}

「レイヤー」は、KineticJS ステージに既に追加されている単純な KineticJS レイヤーです。

于 2013-04-12T21:35:31.607 に答える