首页 > web前端 > js教程 > 如何在使用 FabricJS 缩放时保持椭圆的笔划宽度?

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

王林
发布: 2023-08-30 19:25:11
转载
1194 人浏览过

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

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

语法

new fabric.Ellipse({ strokeUniform: Boolean }: Object)
登录后复制

参数

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

Options Keys

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

示例 1

缩放对象时描边宽度的默认外观< /strong>

以下示例描述了正在缩放的​​椭圆对象的描边宽度的默认外观。由于我们没有使用 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中文网其他相关文章!

来源:tutorialspoint.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板