0

これは私のJavascriptです

 var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

canvas.addEventListener('click', drawLine, false);
var clicks = 0;
var lastClick = [0, 0];

$(function() {
  $.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#000', '#fff'], function() {
                $('#tools').append("<a href='#' onclick=\"context.strokeStyle = '" + this + "';return false;\" style='width: 10px; background: " + this + ";'></a> ");
              });


});


function getCursorPosition(e) {
    var x;
    var y;

    if (e.pageX != undefined && e.pageY != undefined) {
        x = e.pageX;
        y = e.pageY;
    } else {
        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    return [x, y];
}

function drawLine(e) {
    //context = this.getContext('2d');

    x = getCursorPosition(e)[0] - this.offsetLeft;
    y = getCursorPosition(e)[1] - this.offsetTop;

    if (clicks != 1) {
        clicks++;
    } else {
        context.beginPath();
        context.moveTo(lastClick[0], lastClick[1]);
        context.lineTo(x, y, 6);

       // context.strokeStyle = '#000000';
        context.stroke();


        clicks = 0;
    }

    lastClick = [x, y];
};

このHTML

<div id='tools'>
          </div>
 <canvas id="canvas" width="500" height="500"></canvas>

線の描画が終了したら、新しい DIV を生成してドラッグ可能にしたいのですが、どうすればよいですか? DIV 内に行を含める方法がわかりません。

1 本の線の描画を停止すると、Div が作成されるはずです。

これは、より明確な画像の Jfiddle です

http://jsfiddle.net/pVZzY/1/

4

3 に答える 3

2

このタスクには kinetic.js をお勧めします。それを見てみましょうhttp://kineticjs.com/

これは確かにあなたの意図した仕事をはるかに簡単にします

于 2013-06-17T09:37:49.070 に答える
1

キャンバスでは、描画したばかりのオブジェクトを変更/移動/スケーリングすることはできません。鉛筆で色を塗る紙のシートと考えてください。鉛筆の線を移動することはできません。唯一の方法は、古い線を消去して新しい線を描くことです。キャンバスも同様です。

しかし！canvas の操作を容易にするライブラリがたくさんあります。そのうちの 1 つはhttp://kineticjs.com/で、もう 1 つはhttp://paperjs.org/です。kineticjs を主張することはできませんが、どちらも Object レイヤーを作成するという点で paper.js に似ているようです。

簡単に言えば、シーン オブジェクト (画像、線、形状)​​ を作成および変更し、バックステージでキャンバスの描画、クリア、再描画の概念を処理するための API を提供します。

于 2013-06-18T12:19:06.133 に答える
0

fyi、他の投稿で言及されているjsライブラリに関して、私はちょうどチェックして:

  • kineticjs はもうメンテナンスされていません (3 ～ 5 年) が、最後のバージョンは非常に安定しているようです。github で 3775 個の星。
  • 紙はまだ続きます。> github で 10,000 個の星。
于 2019-02-07T18:46:21.823 に答える