如何在使用 FabricJS 缩放时保持椭圆的笔划宽度？

王林转载: 2023-08-30 19:25:11 733浏览

在本教程中，我们将学习如何在使用 FabricJS 缩放时保持椭圆的笔画宽度。默认情况下，描边宽度根据对象的比例值增大或减小。但是，我们可以通过使用 StrokeUniform 属性来禁用此行为。

语法

new fabric.Ellipse({ strokeUniform: Boolean }: Object)

参数

选项（可选）- 此参数是一个提供额外自定义的对象到我们的椭圆。使用此参数，可以更改与 styleUniform 为属性的对象相关的颜色、光标、描边宽度和许多其他属性。

Options Keys

中风统一 - 该属性接受一个布尔值，允许我们指定是否描边宽度是否会随对象一起缩放。其默认值为 False。

示例 1

缩放对象时描边宽度的默认外观

以下示例描述了正在缩放的椭圆对象的描边宽度的默认外观。由于我们没有使用 tripUniform 属性，因此笔画宽度也会受到对象缩放的影响。

<!DOCTYPE html>
<html>
   <head>
      <!-- Adding the Fabric JS Library-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
   </head>

   <body>
      <h2>How to maintain stroke width of Ellipse while scaling using FabricJS?</h2>
      <p>Select the object and stretch it horizontally or vertically. Here the stroke width will get affected while scaling the object up or down. This is the default behavior. Here we have not used the <b>strokeUniform</b> property. </p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            fill: "blue",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 15,
         });
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

示例 2

将StrokeUniform 属性作为键传递

在此示例中，我们将传递StrokeUniform 属性作为键。因此，对象的笔划将不再随着对象的缩放而增加或减少。在此示例中，StrokeUniform 属性已被指定为“true”值，这将确保笔划始终与为笔划宽度输入的精确像素大小相匹配。

<!DOCTYPE html>
<html>
   <head>
      <!-- Adding the Fabric JS Library-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
   </head>

   <body>
      <h2>Maintaining the stroke width of an Ellipse while scaling using FabricJS</h2>
      <p>Select the object and stretch it in any direction. Here the stroke width of the ellipse will remain unaffected at the time of scaling up because we have applied the <b>strokeUniform</b> property. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            fill: "blue",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 15,
            strokeUniform: true,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

以上就是如何在使用 FabricJS 缩放时保持椭圆的笔划宽度？的详细内容，更多请关注php中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：如何使用SolverJS？下一条：Paper.js入门指南：路径和几何形状