động "dỡ bỏ" một phác thảo Processing JS từ vải

Question

Tôi đang sử dụng một số javascript để cho phép người dùng tự động tải một bản phác thảo trên nhấp chuột vào một yếu tố canvas sử dụng:

Processing.loadSketchFromSources ('canvas_id', [ 'sketch.pde']);

Nếu tôi gọi Processing.loadSketchFromSources (...) lần thứ hai (hoặc thứ ba ...), nó sẽ tải tệp .pde thứ hai (hoặc thứ ba ...) lên canvas, đó là những gì tôi mong chờ.

Tôi muốn người dùng có thể nhấp vào một liên kết khác để tải một bản phác thảo khác, dỡ bỏ hiệu quả bản vẽ trước đó. Có một phương pháp tôi có thể gọi (hoặc một kỹ thuật tôi có thể sử dụng) để kiểm tra nếu chế biến có một phác thảo đang chạy, và nếu như vậy, nói với nó để dỡ bỏ nó đầu tiên?

Có một số loại phương thức Processing.unloadSketch() mà tôi đang xem không? Tôi chỉ đơn giản có thể thả đối tượng canvas DOM và tạo lại nó, nhưng (1) có vẻ như sử dụng một cái búa khi tôi cần một cây kim, và (2) nó kết quả trong một màn hình nhấp nháy mà tôi muốn tránh.

Tôi không phải là chuyên gia JS, nhưng tôi đã cố gắng hết sức để xem qua nguồn processing.js để xem những chức năng nào khác có thể tồn tại, nhưng tôi đánh vào tường. Tôi nghĩ có lẽ tôi có thể nhìn vào Processing.Sketches.length để xem nếu một cái gì đó được tải đã, nhưng chỉ đơn giản là pop'ing nó ra khỏi mảng dường như không làm việc (không nghĩ rằng nó sẽ).

Tôi đang sử dụng ProcessingJS 1.3.6.

Answer 1

Do processing.js 1.4.8, câu trả lời được chấp nhận của Andrew (và các câu trả lời khác mà tôi đã tìm thấy ở đây) dường như không hoạt động nữa.

Đây là những gì làm việc cho tôi:

var pjs = Processing.getInstanceById('pjs'); 
    if (typeof pjs !== "undefined") { 
     pjs.exit(); 
    } 

    var canvas = document.getElementById('pjs') 
    new Processing(canvas, scriptText); 

nơi pjs là id của phần tử canvas nơi Scrips đang được chạy.

Answer 2

Tôi không quen thuộc với Processing.js, nhưng mã ví dụ từ trang web có này:

var canvas = document.getElementById("canvas1"); 
// attaching the sketchProc function to the canvas 
var p = new Processing(canvas, sketchProc); 
// p.exit(); to detach it 

Vì vậy, trong trường hợp của bạn, bạn sẽ muốn giữ lại một xử lý cho trường hợp đầu tiên khi bạn tạo ra nó:

var p1 = Processing.loadSketchFromSources('canvas_id', ['sketch.pde']); 

Khi bạn đã sẵn sàng để "dỡ bỏ" và tải một bản phác thảo mới, tôi đoán (nhưng không biết) mà bạn sẽ cần để xóa canvas mình:

p1.exit(); 
var canvas = document.getElementById('canvas_id'); 
var context = canvas.getContext('2d'); 
context.clearRect(0, 0, canvas.width, canvas.height); 
// Or context.fillRect(...) with white, or whatever clearing it means to you 

Sau đó, từ những âm thanh của sự vật, bạn đang miễn phí để đính kèm phác họa khác:

var p2 = Processing.loadSketchFromSources('canvas_id', ['sketch2.pde']); 

Một lần nữa, tôi không thực sự quen thuộc với thư viện đó, nhưng điều này có vẻ đơn giản từ các tài liệu hướng dẫn.

Answer 3

Trong trường hợp người khác tìm kiếm giải pháp, dưới đây là những gì tôi đã làm. Lưu ý rằng điều này đã được đặt bên trong một đóng (không bao gồm ở đây cho ngắn gọn) - do đó các this.launch = function(), blah blah blah ... YMMV.

/** 
* Launches a specific sketch. Assumes files are stored in 
* the ./sketches subdirectory, and your canvas is named g_sketch_canvas 
* @param {String} item The name of the file (no extension) 
* @param {Array} sketchlist Array of sketches to choose from 
* @returns true 
* @type Boolean 
*/ 
this.launch = function (item, sketchlist) { 
    var cvs = document.getElementById('g_sketch_canvas'), 
     ctx = cvs.getContext('2d'); 
    if ($.inArray(item, sketchlist) !== -1) { 
     // Unload the Processing script 
     if (Processing.instances.length > 0) { 
      // There should only be one, so no need to loop 
      Processing.instances[0].exit(); 
      // If you may have more than one, then use this loop: 
      for (i=0; i < Processing.instances.length; (i++)) { 
      // Processing.instances[i].exit(); 
      //} 
     } 
     // Clear the context 
     ctx.setTransform(1, 0, 0, 1, 0, 0); 
     ctx.clearRect(0, 0, cvs.width, cvs.height); 
     // Now, load the new Processing script 
     Processing.loadSketchFromSources(cvs, ['sketches/' + item + '.pde']); 
    } 
    return true; 
};