將畫布推送到靜態畫布

Question

我什至不知道如何措辭，但我會嘗試：

我有一個小應用程序（主要使用fabricjs 1.7.22），它將更改從一個畫布推送到靜態畫布。 我的問題是我有一個類似的應用程序不執行此“推送”操作，因此不需要canvas[0] 。 例如，第二個應用程序中的一個函數如下所示：

function dropText() {
  var text = new fabric.IText('Type here...', {
    fontSize: 27,
    top: 10,
    left: 10,
  });
  canvas.add(text);
}

我希望能夠以這種方式（沒有[0] ）引用下面的代碼，因為這將大大簡化我的應用程序的代碼庫（減少冗余，因為它們共享相似的功能）。 我嘗試將var index = canvas[0]更改為var index = canvas ，然后更新其余代碼以匹配，但是沒有運氣。

原諒我的天真。 我已經為此工作了幾天，但不確定該怎么做。 這可能嗎？ 這是我現在所擁有的：

 var canvas = [], image; canvas.push(new fabric.Canvas('c0')); for (i = 1; i <= 7; i++) { canvas.push(new fabric.StaticCanvas('sc' + i)); } function addText() { var text = new fabric.IText('Type here...', { fontSize: 27, top: 10, left: 10, }); canvas[0].add(text); } var rect = new fabric.Rect({ fill: '#ff0000', width: 100, height: 100, id: 1 }); var circle = new fabric.Circle({ fill: '#ffff00', radius: 50, left: 150, top: 150, originX: 'center', originY: 'center', id: 2 }); canvas[0].on('object:added', onModified); canvas[0].on('object:modified', onModified); canvas[0].on('object:scaling', onModified); canvas[0].on('object:moving', onModified); canvas[0].add(rect, circle); function onModified(option) { var ob = option.target; var index = canvas[0].getObjects().indexOf(ob); ob.clone(function(obj) { for (i = 1; i <= 7; i++) { canvas[i].insertAt(obj, index, true); } }); }; $('#update').click(function() { updateCanvas(); }); function updateCanvas() { var json = JSON.stringify(canvas[0]); for (i = 1; i <= 7; i++) { canvas[i].loadFromJSON(json); } } // Toggling Images function replaceImage(imgUrl) { if (!isImageLoaded) return; //return if initial image not loaded image.setSrc(imgUrl, function() { canvas[0].renderAll(); updateCanvas(); }); } // Default (Blank) fabric.Image.fromURL('https://i.imgur.com/SamdNdX.png', function(img) { isImageLoaded = true; image = img.set({ selectable: false, evented: false, }); canvas[0].add(image); canvas[0].sendToBack(image); updateCanvas(); }); $('#save').click(function() { html2canvas($('#imagesave'), { onrendered: function(canvas) { var a = document.createElement('a'); // toDataURL defaults to png, so we need to request a jpeg, then convert for file download. a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); a.download = 'myfile.jpg'; a.click(); } }); }); 

 body { margin: 0px; padding: 0px; } canvas { border: 1px solid #f00; margin: 0px; display: block; } td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; } #imagesave { background-color: white; height: 637.5px; width: 825px; padding-left: 75px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script> <button onclick="addText();" class="dropdown-item">Add Text</button><button id="save">Save</button> <button onclick="replaceImage('https://i.imgur.com/SamdNdX.png')">Blank</button> <button onclick="replaceImage('https://i.imgur.com/TIINd6E.png')">Hands Pic</button> <div id="imagesave"> <table> <tr> <td> <canvas id="c0" width="187.5" height="318.75"></canvas> </td> <td> <canvas id="sc1" width="187.5" height="318.75"></canvas> </td> <td> <canvas id="sc2" width="187.5" height="318.75"></canvas> </td> <td> <canvas id="sc3" width="187.5" height="318.75"></canvas> </td> </tr> <tr> <td> <canvas id="sc4" width="187.5" height="318.75"></canvas> </td> <td> <canvas id="sc5" width="187.5" height="318.75"></canvas> </td> <td> <canvas id="sc6" width="187.5" height="318.75"></canvas> </td> <td> <canvas id="sc7" width="187.5" height="318.75"></canvas> </td> </tr> </table> </div> 

Answer 1

var mainCanvas;
mainCanvas = new fabric.Canvas('c0');
for (i = 1; i <= 7; i++) {
  canvas[i] = new fabric.StaticCanvas('sc' + i);
}

1>將canvas[0]更改為mainCanvas

2>不要推到fabric.Canvas到靜態畫布數組。 相反，我向循環內的特定索引求助

 var canvas = [], image; var mainCanvas; mainCanvas = new fabric.Canvas('c0'); for (i = 1; i <= 7; i++) { canvas[i] = new fabric.StaticCanvas('sc' + i); } function addText() { var text = new fabric.IText('Type here...', { fontSize: 27, top: 10, left: 10, }); mainCanvas.add(text); } var rect = new fabric.Rect({ fill: '#ff0000', width: 100, height: 100, id: 1 }); var circle = new fabric.Circle({ fill: '#ffff00', radius: 50, left: 150, top: 150, originX: 'center', originY: 'center', id: 2 }); mainCanvas.on('object:added', onModified); mainCanvas.on('object:modified', onModified); mainCanvas.on('object:scaling', onModified); mainCanvas.on('object:moving', onModified); mainCanvas.add(rect, circle); function onModified(option) { var ob = option.target; var index = mainCanvas.getObjects().indexOf(ob); ob.clone(function(obj) { for (i = 1; i <= 7; i++) { canvas[i].insertAt(obj, index, true); } }); }; $('#update').click(function() { updateCanvas(); }); function updateCanvas() { var json = JSON.stringify(mainCanvas); for (i = 1; i <= 7; i++) { canvas[i].loadFromJSON(json); } } // Toggling Images function replaceImage(imgUrl) { if (!isImageLoaded) return; //return if initial image not loaded image.setSrc(imgUrl, function() { mainCanvas.renderAll(); updateCanvas(); }); } // Default (Blank) fabric.Image.fromURL('https://i.imgur.com/SamdNdX.png', function(img) { isImageLoaded = true; image = img.set({ selectable: false, evented: false, }); mainCanvas.add(image); mainCanvas.sendToBack(image); updateCanvas(); }); $('#save').click(function() { html2canvas($('#imagesave'), { onrendered: function(canvas) { var a = document.createElement('a'); // toDataURL defaults to png, so we need to request a jpeg, then convert for file download. a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); a.download = 'myfile.jpg'; a.click(); } }); }); 

 body { margin: 0px; padding: 0px; } canvas { border: 1px solid #f00; margin: 0px; display: block; } td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; } #imagesave { background-color: white; height: 637.5px; width: 825px; padding-left: 75px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script> <button onclick="addText();" class="dropdown-item">Add Text</button><button id="save">Save</button> <button onclick="replaceImage('https://i.imgur.com/SamdNdX.png')">Blank</button> <button onclick="replaceImage('https://i.imgur.com/TIINd6E.png')">Hands Pic</button> <div id="imagesave"> <table> <tr> <td> <canvas id="c0" width="187.5" height="318.75"></canvas> </td> <td> <canvas id="sc1" width="187.5" height="318.75"></canvas> </td> <td> <canvas id="sc2" width="187.5" height="318.75"></canvas> </td> <td> <canvas id="sc3" width="187.5" height="318.75"></canvas> </td> </tr> <tr> <td> <canvas id="sc4" width="187.5" height="318.75"></canvas> </td> <td> <canvas id="sc5" width="187.5" height="318.75"></canvas> </td> <td> <canvas id="sc6" width="187.5" height="318.75"></canvas> </td> <td> <canvas id="sc7" width="187.5" height="318.75"></canvas> </td> </tr> </table> </div>