angelajs中ajax,Fabric.js Triangle angle属性用法及代码示例

在本文中，我们将看到如何使用FabricJS绘制固定角度的画布Triangle。画布三角形表示三角形是可移动的，可以根据需要拉伸。此外，当涉及初始笔触颜色，高度，宽度，填充颜色或笔触宽度时，可以自定义三角形。

为了使之成为可能，我们将使用一个名为FabricJS的JavaScript库。导入库后，我们将在body标签中创建一个画布块，其中将包含三角形。此后，我们将初始化FabricJS提供的Canvas和三角形的实例，并使用angle属性启用画布三角形的角度，并在Canvas上渲染该三角形，如下所示。

用法:

fabric.Triangle({

width:number,

height:number,

angle:number

});

参数：此函数接受上述和以下描述的三个参数：

width:它指定三角形的宽度。

height:它指定三角形的高度。

angle:此参数定义三角形的角度。

例：本示例使用FabricJS启用canvas-like三角形的角度，如下所示。启用角度属性后尝试对对象进行角度调整，它将使三角形旋转定义的数字。

例：

Fabric.js | Triangle angle Property

GeeksforGeeks

Fabric.js | Triangle angle Property

style="border:1px solid #000000">

// Initiate a Canvas instance

var canvas = new fabric.Canvas("canvas");

// Initiate a triangel instance

var triangle = new fabric.Triangle({

width:150,

height:100,

fill:'',

stroke:'green',

strokeWidth:3,

cornerColor:'blue',

angle:45,

});

// Render the triangel in canvas

canvas.add(triangle);

canvas.centerObject(triangle);

输出：