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


<p>在本教程中,我们将学习如何在使用 FabricJS 缩放时保持矩形的笔划宽度。默认情况下,笔划宽度会根据对象的缩放值增加或减少。但是,我们可以使用<em>strokeUniform</em>属性禁用此行为。</p><h2>语法</h2><pre class="result notranslate">new fabric.Rect({ strokeUniform: Boolean }: Object)</pre><h2>参数</h2><ul class="list"><li><p><strong>选项(可选)</strong> − 此参数是一个对象,它为我们的矩形提供了额外的自定义。使用此参数,可以更改与对象相关的属性,例如颜色、光标、笔划宽度以及许多其他属性,其中<em>strokeUniform</em>是一个属性。</p></li></ul><h2>选项键</h2><ul class="list"><li><p><strong>strokeUniform</strong> − 此属性接受一个<strong>布尔</strong>值,它允许我们指定笔划宽度是否会随对象一起缩放。其默认值为 false。</p></li></ul><h2>示例 1</h2><p><strong>缩放对象时笔划宽度的默认外观</strong></p><p>让我们看一个代码示例,该示例描述了正在缩放的矩形对象的笔划宽度的默认外观。由于我们没有使用<em>strokeUniform</em>属性,因此笔划宽度也会受到对象缩放的影响。</p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!DOCTYPE html> <html> <head>    <!-- 添加 Fabric JS 库 -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body>    <h2>缩放对象时笔划宽度的默认外观</h2>    <p>尝试缩放对象以查看默认行为</p>    <canvas id="canvas"></canvas>    <script>       // 初始化画布实例       var canvas = new fabric.Canvas("canvas");       canvas.setWidth(document.body.scrollWidth);       canvas.setHeight(250);       // 初始化矩形对象       var rect = new fabric.Rect({          left: 55,          top: 90,          width: 170,          height: 70,          fill: "#ccccff",          padding: 9,          stroke: "#483d8b",          strokeWidth: 5,       });       // 将其添加到画布       canvas.add(rect);    </script> </body> </html></pre><h2>示例</h2><p><strong>将 strokeUniform 属性作为键传递</strong></p><p>在此示例中,我们将 strokeUniform 属性作为键传递,并将 true 作为值。因此,对象的笔划将不再根据对象的缩放增加或减少,这将确保笔划始终与为笔划宽度输入的精确像素大小匹配。</p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!DOCTYPE html> <html> <head>    <!-- 添加 Fabric JS 库 -->    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body>    <h2>将 strokeUniform 属性作为键传递</h2>    <p>尝试缩放对象以查看笔划如何保持统一宽度</p>    <canvas id="canvas"></canvas>    <script>       // 初始化画布实例       var canvas = new fabric.Canvas("canvas");       canvas.setWidth(document.body.scrollWidth);       canvas.setHeight(250);       // 初始化矩形对象       var rect = new fabric.Rect({          left: 55,          top: 90,          width: 170,          height: 70,          fill: "#ccccff",          padding: 9,          stroke: "#483d8b",          strokeWidth: 5,          strokeUniform: true,       });       // 将其添加到画布       canvas.add(rect);    </script> </body> </html></pre>

更新于: 2022年6月27日

190 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告