javascript - html5 Canvas 填充文本随着sketch.js消失

Question

我的 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/

希望有人能帮助我

Answer 1

sketchJS 会根据其源代码频繁地清除并重新绘制 Canvas 。例如，用户的每个新绘图操作都会清除并重新绘制 Canvas 。

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

sketchJS 目前不支持文本，因此如果您想将文本永久放置到 Canvas 上而不让 sketchJS 删除文本，则必须修改源代码以添加 fillText 功能。

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

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