数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 FabricJS 禁用通过拖动选择对象？
在这篇文章中，我们将演示如何使用 FabricJS 禁用通过拖动选择对象。在 FabricJS 画布中，我们基本上可以点击任意位置并选择一个区域，该区域内的任何对象都将被选中。在这篇文章中，我们将了解如何禁止这种行为。
语法
new fabric.Canvas(element: HTMLElement|String, {selection: boolean}: Object)参数
element − 此参数是<canvas> 元素本身，可以使用document.getElementById() 或<canvas> 元素本身的 id 获取。FabricJS 画布将在此元素上初始化。
options (可选) − 此参数是一个对象，它为我们的画布提供额外的自定义选项。使用此参数，可以更改与画布相关的许多属性，例如颜色、光标、边框宽度等。selection 参数指示是否应启用选择。此键的默认值为 True。
示例 1
让我们首先看看启用选择时拖动选择是什么样的。对于此示例，我们将 selection 键设置为 True，这也是默认值。让我们看看启用选择后画布的行为。
<!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>Disabling the selection of objects on a canvas</h2>
<p>Here you can select the object as the selection key is True</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selection: true
});
// Creating an instance of the fabric.Circle class
var cir = new fabric.Circle({
radius: 40,
fill: "#87a96b",
left: 30,
top: 20,
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>示例 2
selection 键指定是否应启用或禁用通过拖动选择画布中对象的选项。如果我们将该键设置为 False，那么我们将无法再通过拖动来选择对象。
<!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>Disabling the selection of objects on a canvas</h2>
<p> Here you cannot select an area around the object as the selection key is set to False.</p>
<canvas id="canvas"></canvas>
<script>
//Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selection: false
});
//creating an instance of the fabric.Circle class
var cir = new fabric.Circle({
radius: 40,
fill: "#87a96b",
left: 30,
top: 20,
});
//adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>现在我们将 selection 设置为 False，我们将无法再选择对象周围的部分来拖动它。但是，我们仍然可以手动点击并选择对象。
更新于：2022年5月19日
2K+ 次浏览
广告