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

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");
    });
  });

里面有一个 p5 canvas div:

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

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

如何克隆 div 以便 p5 canvas 会在其中？

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

（点击"show canvas"按钮查看）

Answer 1

看起来当您的 canvas 被克隆时，它继承了与原始 ID 相同的 ID。我怀疑当 javascript 绘制到 canvas 时，它只会找到第一个具有给定 id 的并绘制到那个。任何其他人都将被忽略。尝试更改克隆上每个 canvas 的 ID。您可能还需要让 p5 知道新的 canvases。我在这里用工作克隆 fork 你的 fiddle 来证明这个问题； 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');
    });
  });

Answer 2

您的 canvas 元素正在正确克隆。但是，这不会克隆任何写入 canvas.

的数据

如果您希望克隆 canvas 的状态而不重新运行最初生成它的代码，您需要将原始 canvas 的内容写入新创建的 canvas.

$(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>

根据下面的评论，似乎无法克隆附加了事件处理程序的 canvas。要像您的示例一样创建一个完全可用的 canvas，我相信您需要为克隆的元素初始化一个新的 p5 实例。

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

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

jQuery: How do I clone a div containing a p5 canvas?

javascript

jquery

p5.js