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