Question

我的HTML5 canvas元素有问题。我使用sketch.js，以便客户端可以在网页中绘图。客户要求之一就是他可以添加邮票＆＃39;有数字。所以我对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根据其源代码确定经常清除和重绘画布。例如，用户的每个新绘图动作将清除＆amp;重绘画布。

您的this.context.fillText代码暂时＆＃34;借用＆＃34; sketchJS画布并在画布上绘制文本。当sketchJS在内部决定需要清除画布时，你的文字就会消失。

sketchJS目前不支持文本，因此如果您想在不使用sketchJS擦除文本的情况下将文本永久地放到画布上，则必须修改源以添加fillText功能。

或者，解决方法可能是在sketchJS画布的顶部和重叠上添加一个html canvas元素（如html画布＆＃34;图层＆＃34;在sketchJS画布上）。然后将文本绘制到顶部画布上。这样SketchJS就不会删除您想要的文本。

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

html5 canvas filltext与sketch.js一起消失

1 个答案: