html5 canvas filltext与sketch.js一起消失

我的HTML5 canvas元素有问题。 我使用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/

希望有人可以帮助我

sketchJS根据源代码确定经常清除和重绘canvas。 例如,用户的每个新绘图操作都将清除和重绘canvas。

你的this.context.fillText代码暂时“借用”sketchJScanvas并在canvas上绘制文本。 当sketchJS在内部决定需要清除canvas时,文本会消失。

sketchJS目前不支持文本,因此如果要在不使用sketchJS擦除文本的情况下将文本永久放入canvas,则必须修改源以添加fillTextfunction。

或者,一种解决方法可能是在sketchJScanvas的顶部和重叠上添加一个html canvas元素(就像在sketchJScanvas上的htmlcanvas“layer”)。 然后将文本绘制到顶部canvas上。 这样SketchJS将不会删除您想要的文本。

注意:您必须防止覆盖的canvas拦截鼠标事件。 您可以通过设置pointer-events:none; 在顶部canvas上。 这是一个关于指针事件的链接: https : //developer.mozilla.org/en-US/docs/Web/CSS/pointer-events