html5畫布filltext消失與sketch.js

Question

我有一個HTML5畫布元素的問題。我使用sketch.js，以便客戶可以在網頁上繪製圖畫。客戶的要求之一是他可以用數字添加「郵票」。所以我對JS進行了一些修改，使之成爲可能。它的作品，它可以添加郵票。但是，當用戶切換回鋼筆工具並再次開始繪製時，數字消失。

我添加使用fillText方法（）郵票

$.sketch.tools.text = { 
    onEvent: function(e) { 
     switch (e.type) { 
     case 'mousedown': 
     case 'touchstart': 
     this.context.font="16px Verdana"; 
     this.context.fillText(this.stamp, e.pageX - this.canvas.offset().left, e.pageY - this.canvas.offset().top); 
      break; 
     } 
     return true; 
    }, 
    draw: function(action) { 

     return true; 
    } 
    }; 

在這裏看到一個演示： http://jsfiddle.net/brixion/m5dpwvx5/2/

希望有人能幫助我

Answer 1

sketchJS清除，並經常重畫在畫布上，通過測定其源代碼。例如，通過用戶對每個新的繪圖動作將清除&重新繪製在畫布上。

您的this.context.fillText代碼暫時「借用」sketchJS畫布並在畫布上繪製文字。當sketchJS內部決定需要清除畫布時，文本消失。

sketchJS目前不支持文本，所以如果你想永久放置文本到畫布上，而無需sketchJS抹去你的文字，你將不得不修改源添加的能力fillText方法。

可替代地，一種解決方法可能是在頂級的和重疊的sketchJS畫布（如一個HTML畫布「層」在你的sketchJS畫布）添加一個html畫布元件。然後將您的文字繪製到頂部畫布上。這樣SketchJS不會刪除你想要的文字。

注意：必須防止帆布覆蓋從截獲鼠標事件。您可以通過在頂部畫布上設置pointer-events:none;來完成此操作。這裏有一個關於指針的事件鏈接：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events