如何使用 FabricJS 禁用 Ellipse 的居中缩放?
在本教程中,我们将学习如何使用 FabricJS 禁用 Ellipse 的居中缩放。椭圆形是 FabricJS 提供的各种形状之一。为了创建一个椭圆,我们必须创建一个 Fabric.Ellipse 类的实例并将其添加到画布中。通过控件进行缩放时,为 centeredScaling 属性分配“true”值,使用中心作为对象的变换原点。
语法
new fabric.Ellipse({ centeredScaling: Boolean }: Object)
参数
-
选项(可选)- 此参数是一个对象< /em> 为我们的椭圆提供额外的定制。使用此参数,可以更改与 centeredScaling 属性相关的对象的颜色、光标、描边宽度和许多其他属性。
选项键
-
centeredScaling – 此属性接受布尔值 值。当此属性为True时,对象使用中心作为变换原点。
示例 1
将centeredScaling作为键传递并为其分配一个“true”值
以下示例演示了椭圆对象在centeredScaling时的行为方式属性已启用。当我们放大对象时,变换的原点是椭圆的中心。
<!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 disable the centered scaling of Ellipse using FabricJS?</h2> <p>Select the object and stretch it from its corners. The ellipse will scale up from its center. This is the default behavior.</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: white, rx: 90, ry: 50, stroke: #c154c1, strokeWidth: 5, borderColor: #daa520, centeredScaling: true, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
示例 2
禁用 centeredScaling 属性
我们可以通过为其指定“false”值来禁用 centeredScaling 属性。这将不再使用椭圆的中心作为变换中心。这是一个代码,用于演示 –
<!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 disable the centered scaling of Ellipse using FabricJS?</h2> <p>Select the object and stretch it from its corners. You will notice the object scales up but not from its center because we have set <b>centeredScaling</b> as False. </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: , rx: 90, ry: 50, stroke: #c154c1, strokeWidth: 5, borderColor: #daa520, centeredScaling: false, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
以上就是如何使用 FabricJS 禁用 Ellipse 的居中缩放?的详细内容,更多请关注双恒网络其它相关文章!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。