如何使用 EaselJS 获取 canvas 上绘制的所有点并将其存储在数据库中？

Question

是否可以使用 EaselJS 获取在 canvas 上绘制的所有点并将其存储在数据库中，以便我可以重新加载它以备后用？我正在尝试加载和编辑此代码的版本：`https://jsfiddle.net/lannymcnie/ZNYPD/，有人能帮我吗？

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", stage);

// Add some text to draw on top of (also instructions)
stage.addChild(new createjs.Text("Click and Drag to Draw", "40px Arial", "#000000").set({x:200,y:200}));

// Set up the container. We use it to draw in, and also to get mouse events.
var wrapper = new createjs.Container();
wrapper.hitArea = new createjs.Shape(new createjs.Graphics().f("#000").dr(0,0,800,600));
wrapper.cache(0,0,800,600); // Cache it.
stage.addChild(wrapper);

// Create the shape to draw into
var drawing = new createjs.Shape();
wrapper.addChild(drawing);

var lastPoint = new createjs.Point();

wrapper.addEventListener("mousedown", function(event) {

    // Store the position. We have to do this because we clear the graphics later.
    lastPoint.x = event.stageX;
    lastPoint.y = event.stageY;

    // Listen for mousemove
    event.addEventListener("mousemove", function(event){

        // Draw a round line from the last position to the current one.
        drawing.graphics.ss(20, "round").s("#ff0000");
        drawing.graphics.mt(lastPoint.x, lastPoint.y);        
        drawing.graphics.lt(event.stageX, event.stageY);

        // Update the last position for next move.
        lastPoint.x = event.stageX;
        lastPoint.y = event.stageY;

        // Draw onto the canvas, and then update the container cache.
        var erase = document.getElementById("toggle").checked;
        wrapper.updateCache(erase?"destination-out":"source-over");
        drawing.graphics.clear();
    });
});

Answer 1

你显然可以存储每个个体 stageX 和 stageY，但我们谈论的是非常大量的坐标对，而且 "parsing" 从头开始重新绘制所有内容可能很棘手这些坐标。

对此我建议采用不同的方法。如何将绘图保存为图像文件，将其存储到服务器，然后稍后在 canvas 上加载它，如下所示：

//save canvas to image for latter use
image.src = canvas.toDataURL('image/jpeg');

//load the image on a clean canvas
var stage = new createjs.Stage(canvas);
var bitmap = new createjs.Bitmap(image);
stage.addChild(bitmap);
stage.update();

在此之后，您的 canvas 应该看起来和以前完全一样，并且您可以在重新初始化所有侦听器函数后再次开始在其上绘图。

如何使用 EaselJS 获取 canvas 上绘制的所有点并将其存储在数据库中？

How to get all the points that are drawn on the canvas and store it in a database using EaselJS?

javascript

canvas

createjs

easeljs