fabric.js 绘制矩形宽度过长时，边框会出现虚化，怎么处理？

顺晟科技

2022-09-25 07:11:44

292

代码如下：

<!DOCTYPE hyml>
<html>

<head>
  <title>
    Fabric.js | Ellipse strokeUniform Property
  </title>

  <!-- FabricJS CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
  </script>
</head>

<body>
  <div style="text-align:center;width:600px;">
    <h1 style="color:green;">
      GeeksforGeeks
    </h1>
    <b>
      Fabric.js | Ellipse strokeUniform Property
    </b>
  </div>

  <div style="text-align:center;">
    <canvas id="canvas" width="600" height="600" style="border:1px solid #000000;">
    </canvas>
  </div>

  <script>
    // Initiate a Canvas instance 
    var canvas = new fabric.Canvas("canvas");
    var rect = new fabric.Rect({
      width: 10000,
      height: 10000,
      strokeUniform: true,
      stroke: "blue",
      strokeWidth: 2,
      fill: null,
    });
    canvas.add(rect);
  </script>
</body>

</html>

宽度超过一两千的时候，stoke的宽度就生效了好像，边框出现虚化模糊，为什么呀？我用canvas原生绘制的不会有这个问题！代码可以直接copy到本地运行效果如图所示,strokewidth只设置了两个像素，但是虚化成了很多倍；

找到了。fabric.js在1.7.14版本后增加最大画布缓存限制，默认只缓存2mb，绘制像素过大的图像时会出现失真的情况；详细见： https://github.com/fabricjs/f...

官方提供了静态配置可以更改：

http://fabricjs.com/docs/fabr...

上一篇：<font face="宋体"> " 下一篇：vue使用openlayers5本地

网站建设

Html

fabric.js 绘制矩形宽度过长时，边框会出现虚化，怎么处理？