数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 FabricJS 在移动圆形时设置边框不透明度？
在本教程中，我们将使用 FabricJS 设置圆形在移动时的边框不透明度。圆形是 FabricJS 提供的各种形状之一。为了创建圆形，我们将必须创建一个 fabric.Circle 类的实例并将其添加到画布上。我们可以使用 borderOpacityWhenMoving 属性在画布上移动圆形时更改其不透明度。
语法
new fabric.Circle({ borderOpacityWhenMoving: Number }: Object)参数
options (可选) − 此参数是一个 对象，它为我们的圆形提供了额外的自定义选项。使用此参数，可以更改与对象的许多属性相关联的属性，例如颜色、光标、描边宽度以及 borderOpacityWhenMoving 属性。
选项键
borderOpacityWhenMoving − 此属性接受一个 数字，用于指定在移动圆形时我们希望边框的不透明度。它允许我们控制在移动圆形对象时边框的不透明度。默认值为 0.4。
示例 1
显示 borderOpacityWhenMoving 属性的默认行为
让我们来看一个显示 boderOpacityWhenMoving 属性默认行为的示例。当我们选择圆形对象并在画布上移动它时，选择边框会将其不透明度从 1（完全不透明）更改为 0.4，这使其看起来有点半透明。
<!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>Setting the border opacity of Circle while moving using FabricJS</h2>
<p>Select the object and move it around. Notice that the opacity of the outline border reduces slightly while moving the object. This is the default behavior. Here we have not used the <b>boderOpacityWhenMoving</b> property.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#966fd6",
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>示例 2
将 borderOpacityWhenMoving 作为键传递
让我们来看一个为 borderOpacityWhenMoving 属性赋值的示例。在这种情况下，我们将其值设置为 0。这告诉我们，当我们移动圆形时，边框不透明度将变为 0 并且不可见。
<!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 set the border opacity of Circle while moving using FabricJS?</h2>
<p>Select the object and move it around. You will notice that the border opacity becomes 0 when moving the object. Here we have set <b>borderOpacityWhenMoving</b> to 0.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#966fd6",
borderOpacityWhenMoving: 0,
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
更新于： 2022年5月25日
246 次浏览
广告