所属分类：web前端开发
<p>在本教程中，我们将学习如何使用 FabricJS 从左侧设置三角形的位置。三角形是 FabricJS 提供的各种形状之一。为了创建三角形，我们必须创建 <em>fabric.Triangle</em> 类的实例，并将其添加到 canvas.</p><p> 我们可以通过更改三角形对象的位置、不透明度、描边及其尺寸来操作三角形对象。可以使用 <em>left</em> 属性来更改左侧的位置。</p><h2>Syntax</h2><pre class="just-code notranslate language-javascript" data-lang="javascript">new Fabric.Triangle( { left: Number }: Object )</pre><h2>参数</h2><ul class="list"><li><p><strong>选项</strong><strong> (可选)phpcnltphp cn/strong> - 此参数是 <em>Object</em> ，它为我们的三角形提供了额外的自定义。使用此参数，可以更改与 <em>left</em> 为属性的对象相关的颜色、光标、描边宽度等属性。</p></li></ul><h2>Options Keys</h2phpcngtphp cn<ul 类=“列表” “><li><p><strong>left</strong> - 此属性接受 <strong>Number</strong> 值，用于设置对象的左侧位置。该值确定对象将放置在距离画布左边缘多远的位置。</p></li></ul><h2>示例 1</h2><p><strong>三角形对象的默认放置位置</strongphpcn gtphpcn</p><p>让我们看一个代码示例来了解三角形对象的默认放置位置位置未更改时的画布。</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); 画布.setHeight(250); // 初始化一个三角形对象 var triangle = new Fabric.Triangle({ 顶部：50， 填写：“#b0e0e6”， 身高：90， 宽度：100， }); // 将其添加到画布中 canvas.add(三角形); </script> </body> </html></pre><h2>示例 2</h2><p><strong>将左侧属性作为密钥传递</strong></p><p>在此示例中，我们正在为 <em>left</em> 属性分配自定义值。由于它接受 <strong>Number</strong>，因此您必须为其分配一个数值，该数值将代表其从左侧开始的位置。</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>可以看到三角形放置在距左侧80px的位置。</p> <canvas id="canvas"></canvas> <script> // 启动画布实例 var canvas = new Fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); 画布.setHeight(250); // 初始化一个三角形对象 var triangle = new Fabric.Triangle({ 左：80， 顶部：50， 填写：“#b0e0e6”， 身高：90， 宽度：100， }); // 将其添加到画布中 canvas.add(三角形); </script> </body> </html></pre>
微博登录
QQ登录