場景

Fabricjs一個簡單強大的Canvas繪圖庫快速入門：

Fabricjs一個簡單強大的Canvas繪圖庫快速入門_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面的基礎上，可以實現在畫布上添加對象，如果需要組合對象，并設置組合對象的功能屬性可以

使用new fabric.Group():接受兩個參數。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、官方教程

Introduction to Fabric.js. Part 3. — Fabric.js Javascript Canvas Library

2、繪制圓形、繪制文本并組合

????? //繪制圓形var circle = new fabric.Circle({radius: 100,fill: '#f00',scaleY: 0.5,originX: 'center', //調整中心點的X軸坐標originY: 'center' //調整中心點的Y軸坐標});//繪制文本var text = new fabric.Text('公眾號:霸道的程序猿', {fontSize: 20,originX: 'center',originY: 'center'})//進行組合var group = new fabric.Group([circle, text], {left: 350,top: 200,angle: 10})canvas.add(group);

3、完整示例代碼

<template><div><div><canvas id="c" width="800" height="800"></canvas></div></div> </template><script> import { fabric } from "fabric"; export default {name: "HelloFabric",data() {return {};},mounted() {this.init();},methods: {init() {// create a wrapper around native canvas element (with id="c")// 聲明畫布var canvas = new fabric.Canvas("c");// //鼠標按下時事件// canvas.on('mouse:down', function(options) {//?? console.log("mouse:down"+options.e.clientX, options.e.clientY)// })// //鼠標移動時事件// canvas.on('mouse:move', function(options) {//?? console.log("mouse:move"+options.e.clientX, options.e.clientY)// })// //鼠標抬起時事件// canvas.on('mouse:up', function(options) {//?? console.log("mouse:up"+options.e.clientX, options.e.clientY)// })// create a rectangle object// 繪制圖形var rect = new fabric.Rect({left: 80, //距離畫布左側的距離，單位是像素top: 80, //距離畫布上邊的距離fill: "red", //填充的顏色width: 20, //方形的寬度height: 20, //方形的高度});// "add" rectangle onto canvas//添加圖形至畫布canvas.add(rect);//添加圖片fabric.Image.fromURL('images/light.png', function(oImg) {// scale image down, and flip it, before adding it onto canvas//縮小圖像并翻轉它oImg.scale(0.5).set('flipX', true);canvas.add(oImg);});//繪制不規則圖形var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');path.set({ left: 120, top: 120,fill:'red' });//選中監聽事件path.on('selected', function() {console.log('selected');});//對象移動監聽事件path.on('moving', function() {console.log('moving');});//對象被旋轉監聽事件path.on('rotating', function() {console.log('rotating');});//對象被加入監聽事件path.on('added', function() {console.log('added');});//對象被移除監聽事件path.on('removed', function() {console.log('removed');});canvas.add(path);//繪制圓形var circle = new fabric.Circle({radius: 100,fill: '#f00',scaleY: 0.5,originX: 'center', //調整中心點的X軸坐標originY: 'center' //調整中心點的Y軸坐標});//繪制文本var text = new fabric.Text('公眾號:霸道的程序猿', {fontSize: 20,originX: 'center',originY: 'center'})//進行組合var group = new fabric.Group([circle, text], {left: 350,top: 200,angle: 10})canvas.add(group);},}, }; </script>

總結

以上是生活随笔為你收集整理的Fabricjs使用Group实现组合对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。