通过单击按钮添加和删除画布？答案

【问题标题】：Adding and deleting canvases by clicking buttons?通过单击按钮添加和删除画布？
【发布时间】：2020-10-19 04:17:24
【问题描述】：

我正在尝试制作一个漫画制作网络应用程序，我需要允许支持多个画布或“面板”，正如我们所说的那样。我希望能够创建/删除，如果可能的话，通过点击相应的按钮复制画布。例如，添加画布按钮添加画布，删除删除面板等。

<button onclick='addPanel()'>Add another canvas</button>

addPanel() {
  // ...
}

我目前正在使用 Canvas 和 FabricJS，但如果它可以帮助我实现这一目标，我愿意使用新库。

您可以通过this image 更好地了解我的目标。

【问题讨论】：

嗯，实际上是从 dom 创建一个元素，所以检查来自 mdn developer.mozilla.org/en-US/docs/Web/API/Document/createElement 的 API 也看起来删除相同。而且复制也包括这种情况=)
这是否适用于 Fabricjs？使用 Fabricjs，您需要执行 var c = new fabric.Canvas('c', {} 来创建画布。
在该代码内部，我确信它也在使用createElement。您可能会发现它查找它自己的文档。可以通过选项传递吗？
我认为如果您在这方面付出更多努力，人们会提供帮助的。例如，展示您已经尝试过的内容，或者您使用的样板代码。
这是一个普遍的问题，我的问题完美地总结了我所追求的。我没有任何相关的代码要包含，因为再一次，这是一个问题，而不是我的代码的问题。 @ConstantinTeo

标签： javascript html canvas html5-canvas fabricjs

【解决方案1】：

试试这个代码。

这是 JavaScript 的基础：

    var x= "1";
    function add_canvas(){
        var add_canvas = document.createElement('canvas');
        document.body.appendChild(add_canvas);
        add_canvas.setAttribute("id", "mycanvas_"+ x );
        add_canvas.setAttribute("class", "canvas");
        color();
    }
    function remove_canvas(){
        x--;
        var remove_canvas = document.getElementById("mycanvas_"+x);
        remove_canvas.remove();
    }
    function color(){
        var canvas = document.getElementById("mycanvas_"+x);
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0,0,150,75);
        x++;
    }

    <button onclick="add_canvas()">ADD CANVAS</button>
    <button onclick="remove_canvas()">REMOVE CANVAS</button>

【讨论】：

除了使用 FabricJS 画布而不是基本画布之外，有什么方法可以做到这一点？

【解决方案2】：

这应该可以解决您的问题。

我知道我们可以只使用 jQuery 来优化它。请这样做。

var canvas = null; 
var CANVAS_LIST = {}; 
var pageId =0; 

function addPanels(el){
console.log(el.value); 
 for(let i = 0 ; i<el.value; i++){
  pageId= pageId+1; 
  addPage(pageId); 
 }
}

function copyPage(srcPageId){
pageId = pageId+1;
 addPage(pageId)
 CANVAS_LIST[pageId].clear(); 
 
  CANVAS_LIST[pageId].loadFromJSON(JSON.stringify( CANVAS_LIST[srcPageId]), function(){ CANVAS_LIST[pageId].renderAll()});
 
 CANVAS_LIST[pageId].renderAll(); 
}

function addPage(pageId){

var rmvButton = document.createElement("button"); 
  var div = document.createElement("div"); 
  div.id = "div_"+pageId; 

   var t = document.createTextNode("Remove");
  rmvButton.setAttribute("style","color:red;font-size:23px");
  rmvButton.appendChild(t);
  rmvButton.id = "btn_"+pageId;
  rmvButton.onclick = function () {
    let id = $(this).attr("id").replace('btn_',''); 
    CANVAS_LIST[id].dispose();
    $("#div_"+id).remove(); 
  }


var copybtn = document.createElement("button"); 
   t = document.createTextNode("Copy");
  copybtn.setAttribute("style","color:green;font-size:23px");
  copybtn.appendChild(t);
  copybtn.id = "btn_copy_"+pageId;
  copybtn.onclick = function () {
  let id = $(this).attr("id").replace('btn_copy_',''); 

  copyPage(id); 
}

  var canElement = document.createElement("canvas"); 
  canElement.width = 200; 
  canElement.height = 200; 
  canElement.id = "can_"+pageId;
  div.append(copybtn);
  div.append(rmvButton);
  div.append(canElement);
  
  $("#panel").append(div); 
  canvas = new fabric.Canvas(canElement);
  canvas.id ="can_"+pageId;
  CANVAS_LIST[pageId] =canvas; 

  selectedCanvas = CANVAS_LIST[pageId]; 
  selectedCanvas.add(new fabric.IText("Page "+pageId));
  selectedCanvas.renderAll();
}

$("#addPage").click(function(){
  pageId= pageId+1; 
  addPage(pageId); 
});

canvas{
border: black solid 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
  crossorigin="anonymous"></script>

<input type="text" value="" placeholder="How many panels you want?" id="panelInput" onBlur="addPanels(this)"> 

<hr/>
<br/>
<input type="button" value="Add Page" id="addPage"> 

<div id="panel">

</div>

【讨论】：