1

我正在制作一个Fabric.js用户可以上传图像和制作海报的基于应用程序的过程。最近我开始研究clip使用用户绘制的路径裁剪图像的功能。

工作原理：用户从画布中选择图像并单击crop按钮。activeElement是从画布中选择的，它是image src被提取的。此 SRC 用于将图像canvas放在Bootstra Modal. 用户单击将绘制路径的图像，最后裁剪图像。

单击裁剪按钮后，将从点生成 SVG 路径。然后这个值用于裁剪图像。

问题：如果图像是没有背景的 PNG（我们只使用 PNG），它将使背景变为“黑色”。

裁剪后图像背景变黑

下面，@_path指的是面料。通过用户点击使用 svg 路径创建的路径对象。@_image是图像fabric.Image。

clipPath: () ->
    path_x = @_path.getLeft() -  ( @_image.getWidth() / 2 )
    path_y = @_path.getTop()- ( @_image.getHeight() / 2 )
    @_path.setLeft path_x
    @_path.setTop path_y
    # console.log 'Fill white'
    # @_image.setFill('white')

    @_image.clipTo = ( ctx ) =>
      @_path.render( ctx )

    @_image._clipToPath = @getPathSVG() 
    @_canvas.renderAll()
    return

我试过了@_image.setFIll('white')，@_image.backgroundColor = 'rgba(255,255,255,1)'但似乎没有效果。

问题：

  1. 我是否以正确的方式裁剪/裁剪图像（即：使用clipTo）？为什么你认为
  2. 为什么你认为图像在透明的地方是黑色的？

提前致谢。

4

0 回答 0