Question

按照this question的说明，我正在克隆一个div，其中包含p5画布。克隆后，画布将不响应鼠标坐标。

如何在克隆后使p5画布仍然处于活动状态？

$(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草图的创建封装到一个函数或类中。然后，每当我要创建草图的新副本时，都将调用该函数或类。您还可以将所有共享状态存储在两个都可以访问的全局变量中。

p5画布在克隆后是静态的

1 个答案: