html5 canvas filltext与sketch.js一起消失 [英] html5 canvas filltext disappears with sketch.js

问题描述

我的HTML5 canvas元素有问题。我使用sketch.js，以便客户端可以在网页中制作图纸。客户要求之一是他可以添加带有数字的邮票。所以我对JS进行了一些修改以使其成为可能。它有效，可以添加邮票。但是当用户切换回钢笔工具并再次开始绘图时，数字会消失。

I have a problem with the HTML5 canvas element. I use sketch.js so the client can make drawings in a webpage. One of the clients requirement is that he can add 'stamps' with numbers. So I made some modifications to the JS to make this possible. And it works, its possible to add stamps. But when the user switches back to the pen tool and starts drawing again, the numbers dissappears.

我使用fillText（）

I add the stamps using 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根据其源代码确定经常清除和重绘画布。例如，用户的每个新绘图动作将清除&重绘画布。

sketchJS clears and redraws the canvas frequently as determined by its source code. For example each new drawing action by the user will clear & redraw the canvas.

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

Your this.context.fillText code temporarily "borrows" the sketchJS canvas and draws your text on the canvas. Your text disappears when sketchJS internally decides it need to clear the canvas.

sketchJS目前不支持文字，所以如果你想在没有sketchJS的情况下永久地将文字放到画布上擦除文本，你必须修改源代码以添加fillText功能。

sketchJS does not currently support text, so if you want to permanently put text onto the canvas without having sketchJS erase your text, you will have to modify the source to add the fillText capability.

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

Alternatively, a workaround might be to add an html canvas element on top-of-and-overlapping your sketchJS canvas (like an html canvas "layer" over your sketchJS canvas). Then draw your text onto the top canvas. This way SketchJS won't erase your desired text.

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

Note: You must prevent the overlaying canvas from intercepting mouse events. You can do this by setting pointer-events:none; on the top canvas. Here's a link about pointer-events: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

这篇关于html5 canvas filltext与sketch.js一起消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！