jQuery:如何克隆包含p5画布的div? [英] jQuery: How do I clone a div containing a p5 canvas?

问题描述

使用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/

(单击显示画布"按钮查看)

解决方案

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

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

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

Using jQuery to clone a div:

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

with a p5 canvas inside that div:

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

the div clones correctly but the p5 canvas is not there.

how do I clone the div so that the p5 canvas will be inside it?

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

(click on "show canvas" button to see)

解决方案

Your canvas element is being cloned correctly. However, this will not clone any data written to the canvas.

If you wish to clone the state of the canvas without rerunning the code that generated it in the first place, you need to write the content of the original canvas to the newly created 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>

Based on comments below, it does not seem to be possible to clone a canvas with its event handlers attached. To create a fully working canvas like your example I believe you would need to initialise a new instance of p5 for the cloned element.

Example: https://jsfiddle.net/3rror404/12fxj48h/40/

这篇关于jQuery:如何克隆包含p5画布的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！