學習整理fabric.js自定義選擇控制框樣式和增加控制圖標

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2023年5月23日 10:25 本文熱度 2181

選擇控制框簡介

我們以前文中的一個例子作為示例。如下圖，當我們點擊一個畫布中的對象，對象周圍就出現了一個控制框，控制框上一共9個控制點。

在這里插入圖片描述

控制線

如上圖所示，控制框的范圍由控制線限定。自定義時，根據需要，我們一般會修改控制線的以下屬性

是否顯示
顏色
與框選對象間的內邊距

控制點

如上圖所示，點擊并拖動不同的控制點，會產生不同的交互效果。下面區分不同的控制點類型分別進行介紹：

1、水平縮放控制點：即第一列中間和第三列中間兩個控制點。點擊并進行拖動，會改變對象的水平縮放值（scaleX，初始值為1）

2、豎直縮放控制點：即第二列第二行和第三行兩個控制點。點擊并進行拖動，會改變對象的豎直縮放值（scaleY，初始值為1）

3、等比例縮放控制點：即左上、右上、左下、右下四個控制點。點擊并進行拖動，會同時并等比例改變對象的scaleX和scaleY兩個值

4、中心旋轉控制點：即第二列最上方的控制點。點擊并進行拖動，會改變對象的角度值（angle，初始值為0）

注意

左上的等比例縮放控制點還會改變對象的top和left值。
左中的水平縮放控制點還會改變對象的left值。
中心旋轉控制點還會改變對象的top和left值。

自定義控制線樣式

上文中提到，我們一般對控制線是否顯示、顏色、與框選對象間的內邊距這幾個屬性進行自定義修改。這里用另一個例子，對上述屬性逐一進行介紹。

如圖所示，其默認的控制線樣式如下：

在這里插入圖片描述

與框選對象間的內邊距

fabric.Object.prototype.padding = 10;1

代碼說明

padding即內邊距，目前只支持4個方向的統一設置，不支持單獨設置

結果
在這里插入圖片描述
是否顯示

我們之前見過的編輯器，其旋轉控制點和主體之間一般沒有那條控制線，這里我們對它進行隱藏。

代碼

fabric.Object.prototype.controls.mtr.withConnection = false;1

代碼說明

fabric.Object是所有對象的父類，修改其屬性即可對它的子類（Rect、Circle…）都生效。
controls包含了Object類的所有控制點的信息。
mtr是middle top rotation的縮寫，即中心旋轉控制點。
withConnection即mtr是否和主體有連線，此處設為false。

結果

可見，旋轉控制點和主體之間的那條連接線沒有了

在這里插入圖片描述

修改控制線顏色

我們將控制線默認的淺藍色改為 #dc143c，一種紅色

代碼

fabric.Object.prototype.borderColor = 'dodgerblue';1

效果圖
在這里插入圖片描述

自定義控制點樣式

對于控制點，我們可以自定義修改其形狀、大小、邊框顏色、填充顏色等屬性。這里對于各個屬性不再一一介紹，我們用一個綜合的例子對它們進行演示。

代碼

// 修改控制點的形狀，默認為`rect`矩形，可選的值還有`circle`圓形
fabric.Object.prototype.cornerStyle = "circle";
// 修改控制點的填充色為白色
fabric.Object.prototype.cornerColor = "white";
// 修改控制點的大小為10px
fabric.Object.prototype.cornerSize = 10;
// 設置控制點不透明，即可以蓋住其下的控制線
fabric.Object.prototype.transparentCorners = false;
// 修改控制點的邊框顏色為`gray`灰色
fabric.Object.prototype.cornerStrokeColor = "gray";
    
// 單獨修改旋轉控制點距離主體的縱向距離為-20px
fabric.Object.prototype.controls.mtr.offsetY = -20;
// 單獨修改旋轉控制點，光標移動到該點上時的樣式為`pointer`，一個手的形狀
fabric.Object.prototype.controls.mtr.cursorStyle = "pointer";

自定義控制點貼圖

在這里插入圖片描述

/*控制選中邊框 旋轉圖標 start*/

// 渲染圖標的方法
function renderIcon(image, initialAngle) {
    return function (ctx, left, top, styleOverride, fabricObject) {
        let size = this.cornerSize;
        ctx.save();
        ctx.translate(left, top);
        ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle + initialAngle));
        ctx.drawImage(image, -size / 2, -size / 2, size, size);
        ctx.restore();
    };
}

// 圖標的下載鏈接省略
const iconURL = "../img/xuanzhuan.png";
const callback = (image, isError) => {
    if (!isError) {
        fabric.Object.prototype.controls.ml = new fabric.Control({
            x: 0,
            y: -0.5,
            offsetY: -20,
            cursorStyle: 'pointer',
            actionHandler: fabric.controlsUtils.rotationWithSnapping,
            cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,
            // 渲染圖標
            render: renderIcon(image._element, 0),
            // 設置控制點大小
            cornerSize: 30
        });
    }
};
fabric.Image.fromURL(iconURL, callback);

/*控制選中邊框 旋轉圖標 stop*/

在這里插入圖片描述

添加自定義控制點

有的時候，我們可能不滿足于默認提供的9個控制點，想要自己添加一些控制點上去，比如用于刪除對象的控制點。這個小節，我們使用一個垃圾桶圖標來實現它。

首先看一下實現效果：

在這里插入圖片描述
代碼

/*控制選中邊框 增加自對應圖標 start*/


// 從畫布中刪除當前選中的對象
function deleteObject() {
    // 獲取畫布當前選中的對象
    let activeObject = canvas.getActiveObject();
    if (activeObject) {
        canvas.remove(activeObject);
        canvas.renderAll();
    }
}

// 垃圾桶圖標的下載鏈接
const deleteIconURL = "../img/delete.png";
const deletecallback = (img, isError) => {
    console.log(img);
    if (!isError) {
        fabric.Object.prototype.controls.delete = new fabric.Control({
            // x和y設置該控制點和第二列中間的控制點重合
            x: 0,
            y: -0.5,
            // offsetX和offsetY設置該控制點在水平和豎直兩個方向上
            // 偏移的距離（單位px）
            offsetX: 28,
            offsetY: -20,
            // 光標移動到該控制點時變為一個手的圖標
            cursorStyle: 'pointer',
            // 自定義的值，可忽略
            actionName: "delete",
            // 設置當點擊了該控制點，鼠標彈起是執行的動作處理方法
            mouseUpHandler: () => deleteObject(),
            //渲染圖標
            render: renderIcon(img._element, 0),
            cornerSize: 39
        });
    }
};
fabric.Image.fromURL(deleteIconURL, deletecallback);

/*控制選中邊框 增加自對應圖標 stop*/

注意

renderIcon 方法在上邊定義過了，可以直接調用

所有代碼

在這里插入圖片描述

效果圖

在這里插入圖片描述

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Fabric.js 上傳圖片保存</title>
    <script src="../fabric5.2.1.js"></script>
    <style>
        div#container {
            padding: 30px;
            font-family: 'verdana', lucida;
        }
        input {
            background-color: #ccc;
            padding: 0;
            width: 300px;
            color: #777;
        }
        #lnkDownload {
            display: block;
            padding: 0;
            margin-top: 10px;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="container">
    <canvas id="imageCanvas" width="300" height="300"></canvas>
    <a id="lnkDownload" href="#">
        <button> 保存圖片</button>
    </a>
</div>
<script src="script.js"></script>
</body>
</html>

script.js

var canvas = new fabric.Canvas('imageCanvas', {
    backgroundColor: 'rgb(240,240,240)',
    includeDefaultValues: false,// 指示toObject/toDatalessObject是否應該包含默認值，如果設置為false，則優先于對象值
    perPixelTargetFind: true, //這一句說明選中的時候以圖形的實際大小來選擇而不是以邊框來選擇
    hasBorders: false,
});

canvas.setWidth(500);
canvas.setHeight(500);

/*控制選中邊框 start*/
//將內邊距設置為10px
fabric.Object.prototype.padding = 10;
// 修改控制點的形狀，默認為`rect`矩形，可選的值還有`circle`圓形
fabric.Object.prototype.cornerStyle = "circle";
// 修改控制點的填充色為白色
fabric.Object.prototype.cornerColor = "white";
//將控制線默認的淺藍色改為 #dc143c，
fabric.Object.prototype.borderColor = '#dc143c';
// 修改控制點的大小為10px
fabric.Object.prototype.cornerSize = 10;
// 設置控制點不透明，即可以蓋住其下的控制線
fabric.Object.prototype.transparentCorners = false;
// 修改控制點的邊框顏色為`gray`灰色
fabric.Object.prototype.cornerStrokeColor = "blue";
// 單獨修改旋轉控制點距離主體的縱向距離為-20px
fabric.Object.prototype.controls.mtr.offsetY = -20;
// 單獨修改旋轉控制點，光標移動到該點上時的樣式為`pointer`，一個手的形狀
fabric.Object.prototype.controls.mtr.cursorStyle = "pointer";
//旋轉控制點和主體之間一般沒有那條控制線，這里我們對它進行隱藏。
fabric.Object.prototype.controls.mtr.withConnection = false;
/*控制選中邊框 stop*/
/*控制選中邊框 旋轉圖標 start*/

// 渲染圖標的方法
function renderIcon(image, initialAngle) {
    return function (ctx, left, top, styleOverride, fabricObject) {
        let size = this.cornerSize;
        ctx.save();
        ctx.translate(left, top);
        ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle + initialAngle));
        ctx.drawImage(image, -size / 2, -size / 2, size, size);
        ctx.restore();
    };
}

// 圖標的下載鏈接省略
const iconURL = "../img/xuanzhuan.png";
const callback = (image, isError) => {
    if (!isError) {
        fabric.Object.prototype.controls.ml = new fabric.Control({
            x: 0,
            y: -0.5,
            offsetY: -20,
            cursorStyle: 'pointer',
            actionHandler: fabric.controlsUtils.rotationWithSnapping,
            cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,
            // 渲染圖標
            render: renderIcon(image._element, 0),
            // 設置控制點大小
            cornerSize: 30
        });
    }
};
fabric.Image.fromURL(iconURL, callback);

/*控制選中邊框 旋轉圖標 stop*/

/*控制選中邊框 增加自對應圖標 start*/

// 從畫布中刪除當前選中的對象
function deleteObject() {
    // 獲取畫布當前選中的對象
    let activeObject = canvas.getActiveObject();
    if (activeObject) {
        canvas.remove(activeObject);
        canvas.renderAll();
    }
}

// 垃圾桶圖標的下載鏈接
const deleteIconURL = "../img/delete.png";
const deletecallback = (img, isError) => {
    console.log(img);
    if (!isError) {
        fabric.Object.prototype.controls.delete = new fabric.Control({
            // x和y設置該控制點和第二列中間的控制點重合
            x: 0,
            y: -0.5,
            // offsetX和offsetY設置該控制點在水平和豎直兩個方向上
            // 偏移的距離（單位px）
            offsetX: 28,
            offsetY: -20,
            // 光標移動到該控制點時變為一個手的圖標
            cursorStyle: 'pointer',
            // 自定義的值，可忽略
            actionName: "delete",
            // 設置當點擊了該控制點，鼠標彈起是執行的動作處理方法
            mouseUpHandler: () => deleteObject(),
            //渲染圖標
            render: renderIcon(img._element, 0),
            cornerSize: 39
        });
    }
};
fabric.Image.fromURL(deleteIconURL, deletecallback);

/*控制選中邊框 增加自對應圖標 stop*/

// 矩形
var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'orange',
    width: 100,
    height: 100,
})
canvas.add(rect);

// 圓角矩形
var rect2 = new fabric.Rect({
    left: 300,
    top: 100,
    fill: 'yellowgreen',
    width: 100,
    height: 100,
    rx: 20,
    ry: 20
})
canvas.add(rect2);

// 圓形
var circle = new fabric.Circle({
    radius: 50,
    fill: 'green',
    left: 200,
    top: 200,
    controls: false, // 不可編輯
    hasControls: false, // 控件將不顯示，并且不能用于操作對象
});

canvas.add(circle);

// 使用 IText，可編輯文本
var text = new fabric.IText(
    '奇葩呀，www.qipa250.com',
    {
        top:300,
        fontSize:14,
        fontFamily: 'Comic Sans'
    }
)
canvas.add(text);

var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);

function saveImage() {
    console.log('toJSON==', canvas.toJSON());
    console.log('toObject==', canvas.toObject()); // 輸出序列化的內容
    this.href = canvas.toDataURL({
        format: 'png',
        quality: 0.8
    });
    this.download = 'canvas.png';
}