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

Question

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

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

addPanel() {
  // ...
}

我目前正在使用 Canvas 和 FabricJS 但我愿意使用新库，如果可以的话帮我实现这个。

您可以通过 this image 更好地了解我的追求。

Answer 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>

Answer 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>

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

Adding and deleting canvases by clicking buttons?

html

javascript

canvas

html5-canvas

fabricjs