渲染

Question

我试图在画布上渲染这张照片：

但这就是它使用FabricJS呈现的方式：

顺便说一句，使用EaselJS，相同的图片通常会呈现

我的CoffeeScript：

renderPicture = (pic) ->
  pic.left = coords.x - (pic.width / 2)
  pic.top = coords.y - (pic.height / 2)
  canvas.add(pic)

image = new fabric.Image.fromURL '/images/medium/missing.png', renderPicture, {
  opacity: 1
}

如您所见，图片的不透明度等于1，但我仍然认为它的不透明度为0.5。如何解决？

Answer 1

问题在于我的HTML中的硬编码不透明度。

<canvas id="editorWindow" style="background-color: rgba(255, 194, 93, 0.4)">
</canvas>

CreateJS忽略了这一点，但对于FabricJS来说，这是至关重要的。您应该使用buitl-in function来改变bg颜色。