Question

这是我的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/

Answer 1

我建议kinetic.js执行此任务。看看它http://kineticjs.com/

这肯定会让您的工作变得更加轻松

Answer 2

Canvas不允许您更改/移动/缩放刚刚绘制的对象。可以把它想象成用铅笔着色的纸张，你不能移动铅笔线，唯一的方法是擦除旧线并画一个新线 - 同样适用于画布。

但是！有许多库可以更轻松地使用画布，其中一个是http://kineticjs.com/，另一个是http://paperjs.org/。我不能要求kineticjs，但似乎它与paper.js类似，它们都创建了一个Object层。

简单来说 - 它们为您提供API来创建和更改场景对象（图像，线条，形状），并在后台处理绘制 - 清除 - 重绘Canvas概念。

Answer 3

fyi，关于其他帖子中提到的js库，我刚刚检查了一下：

纸张还在用。 github上有10,000颗星。

是否有可能使我在Canvas中绘制的每一行都可拖动？

3 个答案: