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 内的行。

当我停止绘制一条线时，应该创建 Div。

这是 Jfiddle 以获得更清晰的图片

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

4

3 回答 3

2

我建议为这项任务使用 kinetic.js。看看它http://kineticjs.com/

这肯定会使您的预期工作更容易

于 2013-06-17T09:37:49.070 回答
1

Canvas 不允许您更改/移动/缩放刚刚绘制的对象。把它想象成用铅笔涂色的纸，你不能移动铅笔线，唯一的方法是擦掉旧线并画一条新线——画布也是如此。

但！有很多库可以让使用画布变得更容易，其中一个是http://kineticjs.com/，另一个是http://paperjs.org/。我不能声称 kineticjs，但似乎它与 paper.js 相似，因为它们都创建了一个 Object 层。

简而言之 - 它们为您提供 API 来创建和更改场景对象（图像、线条、形状）并在后台处理 draw-clear-redraw Canvas 概念。

于 2013-06-18T12:19:06.133 回答
0

仅供参考，关于其他帖子中提到的 js 库，我刚刚检查并：

  • kineticjs 不再维护（3-5 年），但最后一个版本显然非常稳定。3775 颗星在 github 上。
  • 纸还在继续。> 10,000 颗星在 github 上。
于 2019-02-07T18:46:21.823 回答