如何利用织物JS制作帆布图片拼贴？

Question

我是使用织物JS的定制产品。在这种情况下，我想让照片拼贴图片上传功能使用织物JS在画布。我一点也不知道。

下面是我真正想要的拼贴图片。请任何人告诉我如何使用Fabric JS或示例代码来完成此操作。

请跟随这张图片：

​

​

Answer 1

您可以尝试多个画布来创建图片拼贴图像。在每个画布上，任何人都可以添加图像。最终结果将产生照片拼贴。使用以下多个画布，

$(XML).find('view').each(function() {
    var canvasXMLCnt = 0;
    var viewType = $(this).find('view_type').text();
    var divID = 'dynamicDiv_'+viewType;
    createDynamicDiv(divID);
    var aLink = '<a href="javascript:void(0);" id="view_'+viewType+'"> View '+viewType+' </a>';
    $("#multipleViewsDiv").append(aLink);
    $(this).find('canvas').each(function() {
        canvasXMLCnt++;
        var canvasID = $(this).find('canvas_id').text();
        var variable_DynamicCanvas = 'canvas_'+viewType+'_'+canvasXMLCnt;
        var dynamicCanvas = document.createElement('canvas');
        dynamicCanvas.id = variable_DynamicCanvas;
        dynamicCanvas.className = 'dynamic-canvases';
        var createdDiv = document.getElementById(divID);
        createdDiv.appendChild(dynamicCanvas);
        canvasArray.push(variable_DynamicCanvas);
    });
});

检查这个参考文献