如何在Angular 8中修改画布上fabric.js背景图像的图像选项

穆罕默德·阿卜杜拉

我正在使用fabric.js库设置图像背景,但无法获取参考

canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', 
canvas.renderAll.bind(canvas), {
 width: canvas.width,
height: canvas.height,
  // Needed to position backgroundImage at 0/0
  originX: 'left',
  originY: 'top'
 });

我正在使用此函数,但是当我获取canvas.getWidth()时没有canvas.width的属性,但是它不能像这样工作..以及也不能与我的情况一起工作:(

 canvas.setBackgroundImage('images/download.jpg', canvas.renderAll.bind(canvas), 
    {
        backgroundImageOpacity: 0.5,
        backgroundImageStretch: true 
      // above both option are not valid with my case  
    });
杜尔加

您需要设置opacity and scale图片对象而不是backgroundImageOpacity, backgroundImageStretch

var canvas = window._canvas = new fabric.Canvas('c');
fabric.Image.fromURL('https://picsum.photos/200/300', (img) => {
  img.set({
    opacity: 0.5,
    scaleX: canvas.width/img.width,
    scaleY: canvas.height/img.height,
  });
  canvas.setBackgroundImage(img, canvas.requestRenderAll.bind(canvas));
});
canvas {
    border: 1px solid #999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Fabric JS中设置画布的重复背景图像?

来自分类Dev

如何在reveal.js中定位背景图像?

来自分类Dev

如何在图像上做出响应的背景图像

来自分类Dev

如何在CSS中组合背景图像+线性渐变?背景图像上的线性渐变

来自分类Dev

如何在Knockout.js绑定中添加动态添加背景图像?

来自分类Dev

如何在Knockout.js绑定中添加动态添加背景图像?

来自分类Dev

如何通过单击Angular Js中的按钮来更改主体背景图像?

来自分类常见问题

如何在背景图像上添加颜色叠加?

来自分类Dev

如何在Bootstrap表单上放置背景图像?

来自分类Dev

如何在TImage上显示Div背景图像

来自分类Dev

如何在小型设备上放大背景图像

来自分类Dev

如何在div元素上转换多个背景图像?

来自分类Dev

如何在TImage上显示Div背景图像

来自分类Dev

如何在屏幕上显示背景图像?

来自分类Dev

如何在Rails上显示整页背景图像?

来自分类Dev

如何删除画布背景并显示完整背景图像

来自分类Dev

如何在 Xamarin 中修复“ListView 中的背景图像”?

来自分类Dev

如何从CSS背景图像中获取图像源

来自分类Dev

如何在JavaFx中添加多个背景图像

来自分类Dev

如何在倾斜图层(CSS)中倾斜背景图像?

来自分类Dev

如何在Java Swing中设置按钮的背景图像

来自分类Dev

如何在Java Applet中设置背景图像?

来自分类Dev

如何在NetBeans中为JPanel设置背景图像?

来自分类Dev

CSS:如何在div中模糊背景图像?

来自分类Dev

如何在Codeigniter 3中设置背景图像

来自分类Dev

如何在MasterDetailPage菜单中设置背景图像

来自分类Dev

如何在Flutter中模糊DecorationImage的背景图像?

来自分类Dev

如何在LibreOffice Writer 5中设置背景图像?

来自分类Dev

如何在偏斜层(CSS)中偏斜背景图像?

Related 相关文章

  1. 1

    如何在Fabric JS中设置画布的重复背景图像?

  2. 2

    如何在reveal.js中定位背景图像?

  3. 3

    如何在图像上做出响应的背景图像

  4. 4

    如何在CSS中组合背景图像+线性渐变?背景图像上的线性渐变

  5. 5

    如何在Knockout.js绑定中添加动态添加背景图像?

  6. 6

    如何在Knockout.js绑定中添加动态添加背景图像?

  7. 7

    如何通过单击Angular Js中的按钮来更改主体背景图像?

  8. 8

    如何在背景图像上添加颜色叠加?

  9. 9

    如何在Bootstrap表单上放置背景图像?

  10. 10

    如何在TImage上显示Div背景图像

  11. 11

    如何在小型设备上放大背景图像

  12. 12

    如何在div元素上转换多个背景图像?

  13. 13

    如何在TImage上显示Div背景图像

  14. 14

    如何在屏幕上显示背景图像?

  15. 15

    如何在Rails上显示整页背景图像?

  16. 16

    如何删除画布背景并显示完整背景图像

  17. 17

    如何在 Xamarin 中修复“ListView 中的背景图像”?

  18. 18

    如何从CSS背景图像中获取图像源

  19. 19

    如何在JavaFx中添加多个背景图像

  20. 20

    如何在倾斜图层(CSS)中倾斜背景图像?

  21. 21

    如何在Java Swing中设置按钮的背景图像

  22. 22

    如何在Java Applet中设置背景图像?

  23. 23

    如何在NetBeans中为JPanel设置背景图像?

  24. 24

    CSS:如何在div中模糊背景图像?

  25. 25

    如何在Codeigniter 3中设置背景图像

  26. 26

    如何在MasterDetailPage菜单中设置背景图像

  27. 27

    如何在Flutter中模糊DecorationImage的背景图像?

  28. 28

    如何在LibreOffice Writer 5中设置背景图像?

  29. 29

    如何在偏斜层(CSS)中偏斜背景图像?

热门标签

归档