如何使用 Fabricjs 将 Canvas 对象重绘到更大的 Canvas

【问题标题】：How to Redraw Canvas Objects to Larger Canvas using Fabricjs如何使用 Fabricjs 将 Canvas 对象重绘到更大的 Canvas
【发布时间】：2014-12-10 21:09:59
【问题描述】：

在我的页面中，我有大小画布，我的用户看到的是一个中间有默认线的小画布。当用户移动它时，我需要在更大的画布中重新绘制它，所以当用户导出时它，它的一个大图像。

看看我的小提琴样本

Links: http://jsfiddle.net/mailightkun/kahsomv7/10/

【问题讨论】：

你想在这两个画布之间拖放一些东西，对吗？
不完全是拖放，更多的是复制..用户在小画布上所做的事情应该反映在大画布上..

标签： javascript html canvas fabricjs

【解决方案1】：

过去我必须这样做。

此函数将所有对象从画布克隆到另一个画布，并允许您指定左侧和顶部偏移：

function cloneObjects(from_canvas, to_canvas, o_top, o_left) {

    var objects = from_canvas.getObjects();
    for (var i in objects) {

        var object = fabric.util.object.clone(objects[i]);
        var x = object.x;
        var y = object.y;
        var left = object.left;
        var top = object.top;
        object.x = o_left + x;
        object.y = o_top + y;
        object.left = o_left + left;
        object.top = o_top + top;

        object.name += '-export';

        object.setCoords();

        object.selectable = false;

        to_canvas.add(object);


    }

    to_canvas.calcOffset();
    to_canvas.deactivateAll().renderAll();
}

如果这符合您的要求，请告诉我。

【讨论】：