Heim > Web-Frontend > js-Tutorial > Hauptteil

如何使用 FabricJS 设置椭圆的最小允许比例值?

PHPz
Freigeben: 2023-09-08 16:25:02
nach vorne
436 人浏览过

如何使用 FabricJS 设置椭圆的最小允许比例值?

在本教程中,我们将学习如何使用 FabricJS 设置椭圆的最小允许比例。椭圆形是 FabricJS 提供的各种形状之一。为了创建一个椭圆,我们将创建一个 Fabric.Ellipse 类的实例并将其添加到画布中。我们可以通过添加填充颜色来自定义椭圆对象,消除其边框,甚至更改其尺寸。同样,我们还可以使用 minScaleLimit 属性来设置其允许的最小比例。

语法

new fabric.Ellipse({ minScaleLimit : Number }: Object)
Nach dem Login kopieren

参数

  • 选项(可选)- 此参数是一个对象< /em> 为我们的椭圆提供额外的定制。使用此参数可以更改与 minScaleLimit 为属性的对象相关的颜色、光标、边框宽度和许多其他属性。

选项键

  • minScaleLimit - 此属性接受数字 作为允许我们控制椭圆允许的最小比例的值。

示例 1

默认椭圆对象的外观

让我们举个例子来看看不使用 minScaleLimit 属性时椭圆对象的样子。在这种情况下,我们将能够自由缩放对象,因为没有设置最小限制。



   
      
      
   

How to set the minimum allowed scale value of Ellipse using FabricJS?

Here you can select the object and scale it up freely to any extent, as we have not used the minScaleLimit property.

Nach dem Login kopieren

示例 2

minScaleLimit 属性作为带有自定义值的键传递

在此示例中,我们将看到为 minScaleLimit 属性赋值如何更改画布中椭圆对象的最小允许比例值。这里我们使用 0.8 作为值,这意味着我们将无法将对象缩小到小于水平半径 64 像素和垂直半径 40 像素,计算公式为半径 * 限制 (0.8 * 80 = 64 像素,0.8 * 50 = 40 像素)。



   
      
      
   

How to set the minimum allowed scale value of Ellipse using FabricJS?

Select the object and try to scale it down. Here we have set the minScaleLimit to 0.8 beyond which the ellipse cannot be reduced further in size.

Nach dem Login kopieren

以上是如何使用 FabricJS 设置椭圆的最小允许比例值?的详细内容。更多信息请关注PHP中文网其他相关文章!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!