如何使用 FabricJS 获取文本中当前选择的样式?
fabricjsjavascripthtml5 canvas
在本教程中，我们将学习如何使用 FabricJS 获取文本中当前选择的样式。我们可以通过添加 fabric.Text 实例在画布上显示文本。它不仅允许我们移动、缩放和更改文本的尺寸，而且还提供其他功能，例如文本对齐、文本装饰、行高，这些功能可分别通过属性 textAlign、underline 和 lineHeight 获取。我们还可以使用 getSelectionStyles 方法找到当前选择的样式。
语法
getSelectionStyles(startIndexopt, endIndexopt, completeopt)
参数
startIndexopt − 此参数接受一个 Number，表示获取样式的起始索引。
endIndexopt − 此参数接受一个 Number，表示获取样式的结束索引。
completeopt − 此参数接受一个 Boolean 值，决定是否获取完整样式。
示例1
使用 getSelectionStyles 方法
让我们看一个代码示例，以查看使用 getSelectionStyles 方法时记录的输出。在这种情况下，将显示从第 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>Using the getSelectionStyles method</h2> <p>You can open console from dev tools and see that the value is being displayed in the console</p> <canvas id="canvas"></canvas> <script> // 启动一个canvas实例 var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // 初始化一个 text 文本对象 var text = new fabric.Text("Add sample
text here", { width: 300, fill: "green", fontWeight: "bold", }); // 将其添加到画布 canvas.add(text); // 使用 getSelectionStyles 方法 console.log("The style is", text.getSelectionStyles(0, 5, true)); </script> </body> </html>
示例 2
使用 getSelectionStyles 方法并传递不同的值
让我们看一个代码示例，以查看当 getSelectionStyles 方法传递不同的值时记录的输出。在这种情况下，记录的输出将包含第 4 个和第 5 个索引处的字符的样式。
<!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>Using the getSelectionStyles method and passing different values</h2> <p>You can open console from dev tools and see that the value is being displayed in the console</p> <canvas id="canvas"></canvas> <script> // 启动一个canvas实例 var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // 初始化一个 text 文本对象 var text = new fabric.Text("Add sample
text here", { width: 300, fill: "green", fontWeight: "bold", styles: { 0: { 5: { fontSize: 55, fill: "blue", fontStyle: "oblique", }, 4: { fontSize: 45, fill: "pink", fontWeight: "bold", }, }, }, }); // 将其添加到画布 canvas.add(text); // 使用 getSelectionStyles 方法 console.log("The style is", text.getSelectionStyles(4, 6, true)); </script> </body> </html>
