0

その場でキャンバスにパスを描きたいです。これを行う方法は、次の HTML5 キャンバス コードを使用することです。

$('#drawing-canvas').mousedown(function(e){
    startx = e.pageX;
    starty = e.pageY;
    cxt.beginPath();
    cxt.moveTo(startx,starty);
 });

$('#drawing-canvas').mousemove(function(e){
    cxt.lineTo(e.pageX,e.pageY);
    cxt.strokeStyle='red'; 
    cxt.lineWidth = 1;     
    cxt.stroke();
 });

私の質問は、KineticJS を使用して同じことをどのように達成するかです。

アップデート：

このようなものがうまくいくかもしれないと思います。

  $('#container').mousemove(function(e){
  var pen = new Kinetic.Shape({
    drawFunc: function(canvas) {
      var context = canvas.getContext();
      if(moving == false){ // grab the start xy coords from mousedown event
      context.beginPath();
      context.moveTo(startx,starty);
      moving = true;
      }
      context.lineTo(e.pageX,e.pageY);
      context.strokeStyle='#ff00ff'; 
      context.lineWidth = 1;     
      context.stroke();
   }
     penlayer.add(pen);
     stage.add(penlayer); 
  });
 });

ただし、beginPath() と moveTo(..) の処理には問題があることがわかっています。これらをマウスダウンイベントで設定する必要があります。何か案は？

アップデート：

私が取得しようとしている効果は、http://www.redshiftsolutions.com/demos/whiteboard/whiteboard.htmlでペン オプションを選択することで確認できます。これは、canvas と jQuery を使用したシンプルな共同ホワイトボードです。ドラッグ アンド ドロップ機能が追加されたため、これを KineticJS に移行したいと考えています。

4

3 に答える 3

2

ここ: http://jsfiddle.net/akhiyadav1/k4qB8/22/この人物がどのようにそれを行ったかを見てください。

基本的に、新しい Kinetic.Line() を作成し、マウスが動くたびにポイントをプッシュします。

このコードを試してください：

<!DOCTYPE HTML>
<html>
  <head>
      <style>
        body {
            margin: 0px;
            padding: 0px;
        }
        canvas {
            border: 1px solid #9C9898;
        }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.1.js"></script>
    <script>
        window.onload = function() {
            layer = new Kinetic.Layer();
            stage = new Kinetic.Stage({
                container: "container",
                width: 320,
                height: 320
            });

            background = new Kinetic.Rect({
                x: 0, 
                y: 0, 
                width: stage.getWidth(),
                height: stage.getHeight(),
                fill: "white"
            });

            line = new Kinetic.Line({
                points: [0, 0, 50, 50],
                stroke: "red"
            });

            layer.add(background);
            layer.add(line);
            stage.add(layer);

            moving = false;

            stage.on("mousedown", function(){
                if (moving){
                    moving = false;layer.draw();
                } else {
                    var mousePos = stage.getMousePosition();
                    //start point and end point are the same
                    line.getPoints()[0].x = mousePos.x;
                    line.getPoints()[0].y = mousePos.y;
                    line.getPoints()[1].x = mousePos.x;
                    line.getPoints()[1].y = mousePos.y;

                    moving = true;    
                    layer.drawScene();            
                }

            });

            stage.on("mousemove", function(){
                if (moving) {
                    var mousePos = stage.getMousePosition();
                    var x = mousePos.x;
                    var y = mousePos.y;
                    line.getPoints()[1].x = mousePos.x;
                    line.getPoints()[1].y = mousePos.y;
                    moving = true;
                    layer.drawScene();
                }
            });

            stage.on("mouseup", function(){
                moving = false; 
            });

        };
    </script>
</head>
<body>
    <div id="container" ></div>
</body>

于 2013-01-07T21:38:34.643 に答える
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-12T20:51:53.890 に答える
0

あなたのコードを jsfiddle に入れてください。しかし、それを見ると、あなたのコードは少し間違っているようです。

マウスが移動するたびに、ローカル変数ペンを再定義し、同じペン レイヤーを再度追加します。そして、その構造は少しずれています。試す：

$('#container').mousemove(function(e){
   var pen = new Kinetic.Shape({
      drawFunc: function(canvas) {
          var context = canvas.getContext();
          if(moving == false){ 
              context.beginPath();
              context.moveTo(startx,starty);
              moving = true;
          }
          context.lineTo(e.pageX,e.pageY);
          context.strokeStyle='#ff00ff'; 
          context.lineWidth = 1;     
          context.stroke();
      } 
  });

  penlayer.add(pen);
  stage.add(penlayer);
});

また、直線を作成しようとしている場合は、他のマウス イベントを使用してより適切に制御できるものを使用することをお勧めします。

 $('#container').mousedown(function(e){
       //draw temporary shape
 }
 $('#container').mousemove(function(e){
       //redraw shape
 }
 $('#container').mouseup(function(e){
       //add shape to layer
 }

また、Kinetic.Line() などを使用しないのはなぜですか。

 var startLine; // make this global because this can be redefined 
 $('#container').mousedown(function(e){
    startLine = new Kinetic.Line({
         points: [stage.getUserPosition().x, stage.getUserPosition().y],
         stroke: 'red',
         strokeWidth: 15,
         lineCap: 'round',
         lineJoin: 'round'
    });
 }
 $('#container').mouseUp(function(e){
    var endLine = new Kinetic.Line({
         points: [startLine.getX(), startLine.getY(), stage.getUserPosition().x, stage.getUserPosition().y],
         stroke: 'red',
         strokeWidth: 15,
         lineCap: 'round',
         lineJoin: 'round'
    });
    layer.add(endLine);
 }

これは非常に大まかな解決策であり、startLine と endLine のスコープを解決する必要があります。

于 2013-01-08T20:45:05.840 に答える