我正在尝试制作漫画制作的Web应用程序,我需要允许我们支持多幅画布或“面板”。我希望能够创建 / 删除,并在可能的情况下通过单击相应的按钮来复制画布。例如,添加画布按钮可添加画布,删除可删除面板等。
<button onclick='addPanel()'>Add another canvas</button>
addPanel() {
// ...
}
我目前正在使用 Canvas 和 FabricJS ,但是如果愿意,我愿意使用新的库。
使用this image,您可以更好地了解我的追求。
答案 0 :(得分: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>
答案 1 :(得分:1)
这应该可以解决您的问题。
我知道我们可以仅使用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>