Question

使用jQuery克隆div：

$(document).ready(function() {
// clicking the buttton
  $(".showcanvas").click(function() {
// cloning and appending the div
    $(".canvas").first().clone(true).appendTo("article").fadeIn("1200");
    });
  });

在该div中带有p5画布：

<script>
  var sketch = function(p) {
     p.setup = function(){
       p.createCanvas(100, 100);
       p.background(0);
     }
   };
   new p5(sketch, 'drawing');
</script>

div正确克隆，但p5画布不存在。

如何克隆div，以便将p5画布放入其中？

https://jsfiddle.net/vanderhurk/xpvt214o/896958/

（单击“显示画布”按钮查看）

Answer 1

您的画布元素已正确克隆。但是，这不会克隆任何写入画布的数据。

如果您希望克隆画布的状态而无需重新运行生成画布的代码，则需要将原始画布的内容写入新创建的画布。

$(document).ready(function() {
  $(".showcanvas").click(function() {
	
  // Find the original canvas element
  var origCanvas = $(".canvas").first().find('canvas');
  
  // Clone the div wrapper
  var clonedDiv = $(".canvas").first().clone(true);
  
  // Find the cloned canvas
  var clonedCanvas = clonedDiv.find('canvas');
  
  // Update the ID. (IDs should be unique in the document)
  clonedCanvas.prop('id', 'defaultCanvas' + $(".canvas").length)
  
  // Draw the original canvas to the cloned canvas
  clonedCanvas[0].getContext('2d').drawImage(origCanvas[0], 0, 0);
  
  // Append the cloned elements 
  // (Use .hide() before .fadeIn(). The duration should be a number, not a string)
  clonedDiv.appendTo("article").hide().fadeIn(1200);
    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>

<article>
  <button class = "showcanvas">show canvas</button>

  <div class = "canvas">
    <div id = "drawing">
    hi
    </div>
  </div>
</article>

<script>
  var sketch = function(p) {
     p.setup = function(){
       p.createCanvas(100, 100);
       p.background(0);
     }
   };
   new p5(sketch, 'drawing');
</script>

根据下面的评论，似乎无法克隆附有事件处理程序的画布。要创建一个像您的示例一样可以正常使用的画布，我相信您需要为克隆的元素初始化p5的新实例。

示例：https://jsfiddle.net/3rror404/12fxj48h/40/

Answer 2

克隆画布时，它继承了与原始ID相同的ID。我怀疑当javascript绘制到画布上时，它只会找到具有给定id的第一个并将其绘制。其他任何人都将被忽略。尝试更改克隆上每个画布的ID。您可能还需要让p5知道新的画布。我已经通过克隆工作来证明您的问题，这已使您无所事事。 https://jsfiddle.net/12fxj48h/

 $(document).ready(function() { // clicking the buttton  
 $(".showcanvas").click(function() { // cloning and appending the div
    let clone = $(".canvas").first().clone();
    let cloned_canvas = clone.find("canvas");
    cloned_canvas.attr("id", "defaultCanvas1");

    clone.appendTo("article");
    new p5(sketch, 'drawing');      
  });  
});

更新

实际上，您似乎不需要更新ID（无论如何我还是会这样做）。只是重新运行p5似乎可以工作。 https://jsfiddle.net/yfum1xjv/

$(document).ready(function() {
// clicking the buttton
  $(".showcanvas").click(function() {
// cloning and appending the div
    let clone = $(".canvas").first().clone();

    clone.appendTo("article");
    new p5(sketch, 'drawing');
    });
  });

jQuery：如何克隆包含p5画布的div？

2 个答案: