p5 canvas 克隆后静态

Question

按照的说明，我有一个正在克隆的 div，里面有一个 p5 canvas。克隆时 canvas 不响应鼠标坐标。

如何使 p5 canvas 在克隆后仍然有效？

$(document).ready(function() {
  $(".showcanvas").click(function() {       
    // Find the original canvas element
    var origCanvas = $(".canvas").first().find('canvas')[0];

    // 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);

    // Append the cloned elements
    clonedDiv.appendTo("article").fadeIn('1200');
  });
});

https://jsfiddle.net/vanderhurk/12fxj48h/28/

Answer 1

我正要评论你之前关于这个的问题。您采用的克隆 canvas 元素然后将旧的 canvas 绘制到新的 canvas 的方法恰恰会遇到这个问题：新的 canvas 不是将随着旧 canvas 的变化而变化。如果您只想拍摄快照（尽管有更简单的方法可以做到这一点），这可能会奏效，但我猜这不是您要找的东西。

我建议您考虑使用 P5.js 库中的 实例模式 ，而不是克隆元素和处理 JQuery。您可以阅读有关实例模式 here 的更多信息，但基本上它允许您将 P5.js 代码打包在一个独立的对象中。

这是一个简单的例子：

var s = function( sketch ) {

  var x = 100; 
  var y = 100;

  sketch.setup = function() {
    sketch.createCanvas(200, 200);
  };

  sketch.draw = function() {
    sketch.background(0);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
  };
};

var myp5 = new p5(s);

如果我是你，我会将实例模式 P5.js 草图的创建封装到函数或 class 中。然后每当我想创建草图的新副本时，我都会调用该函数或 class。您还可以将任何共享状态存储在两个草图都可以访问的全局变量中。

p5 canvas 克隆后静态

p5 canvas static after being cloned

javascript

jquery

p5.js