學習整理fabric.js自定義選擇控制框樣式和增加控制圖標
當前位置：點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
選擇控制框簡介控制線控制點注意自定義控制線樣式與框選對象間的內(nèi)邊距fabric.Object.prototype.padding = 10;1 fabric.Object.prototype.controls.mtr.withConnection = false;1 修改控制線顏色fabric.Object.prototype.borderColor = 'dodgerblue';1 自定義控制點樣式// 修改控制點的形狀，默認為`rect`矩形，可選的值還有`circle`圓形 fabric.Object.prototype.cornerStyle = "circle"; // 修改控制點的填充色為白色 fabric.Object.prototype.cornerColor = "white"; // 修改控制點的大小為10px fabric.Object.prototype.cornerSize = 10; // 設(shè)置控制點不透明，即可以蓋住其下的控制線 fabric.Object.prototype.transparentCorners = false; // 修改控制點的邊框顏色為`gray`灰色 fabric.Object.prototype.cornerStrokeColor = "gray";
// 單獨修改旋轉(zhuǎn)控制點距離主體的縱向距離為-20px fabric.Object.prototype.controls.mtr.offsetY = -20; // 單獨修改旋轉(zhuǎn)控制點，光標移動到該點上時的樣式為`pointer`，一個手的形狀 fabric.Object.prototype.controls.mtr.cursorStyle = "pointer"; 自定義控制點貼圖/*控制選中邊框 旋轉(zhuǎn)圖標 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), // 設(shè)置控制點大小 cornerSize: 30 }); } }; fabric.Image.fromURL(iconURL, callback); /*控制選中邊框 旋轉(zhuǎn)圖標 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設(shè)置該控制點和第二列中間的控制點重合 x: 0, y: -0.5, // offsetX和offsetY設(shè)置該控制點在水平和豎直兩個方向上 // 偏移的距離（單位px） offsetX: 28, offsetY: -20, // 光標移動到該控制點時變?yōu)橐粋€手的圖標 cursorStyle: 'pointer', // 自定義的值，可忽略 actionName: "delete", // 設(shè)置當點擊了該控制點，鼠標彈起是執(zhí)行的動作處理方法 mouseUpHandler: () => deleteObject(), //渲染圖標 render: renderIcon(img._element, 0), cornerSize: 39 }); } }; fabric.Image.fromURL(deleteIconURL, deletecallback); /*控制選中邊框 增加自對應圖標 stop*/ 所有代碼效果圖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.jsvar canvas = new fabric.Canvas('imageCanvas', { backgroundColor: 'rgb(240,240,240)', includeDefaultValues: false,// 指示toObject/toDatalessObject是否應該包含默認值，如果設(shè)置為false，則優(yōu)先于對象值 perPixelTargetFind: true, //這一句說明選中的時候以圖形的實際大小來選擇而不是以邊框來選擇 hasBorders: false, }); canvas.setWidth(500); canvas.setHeight(500); /*控制選中邊框 start*/ //將內(nèi)邊距設(shè)置為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; // 設(shè)置控制點不透明，即可以蓋住其下的控制線 fabric.Object.prototype.transparentCorners = false; // 修改控制點的邊框顏色為`gray`灰色 fabric.Object.prototype.cornerStrokeColor = "blue"; // 單獨修改旋轉(zhuǎn)控制點距離主體的縱向距離為-20px fabric.Object.prototype.controls.mtr.offsetY = -20; // 單獨修改旋轉(zhuǎn)控制點，光標移動到該點上時的樣式為`pointer`，一個手的形狀 fabric.Object.prototype.controls.mtr.cursorStyle = "pointer"; //旋轉(zhuǎn)控制點和主體之間一般沒有那條控制線，這里我們對它進行隱藏。 fabric.Object.prototype.controls.mtr.withConnection = false; /*控制選中邊框 stop*/ /*控制選中邊框 旋轉(zhuǎn)圖標 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), // 設(shè)置控制點大小 cornerSize: 30 }); } }; fabric.Image.fromURL(iconURL, callback); /*控制選中邊框 旋轉(zhuǎn)圖標 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設(shè)置該控制點和第二列中間的控制點重合 x: 0, y: -0.5, // offsetX和offsetY設(shè)置該控制點在水平和豎直兩個方向上 // 偏移的距離（單位px） offsetX: 28, offsetY: -20, // 光標移動到該控制點時變?yōu)橐粋€手的圖標 cursorStyle: 'pointer', // 自定義的值，可忽略 actionName: "delete", // 設(shè)置當點擊了該控制點，鼠標彈起是執(zhí)行的動作處理方法 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()); // 輸出序列化的內(nèi)容 this.href = canvas.toDataURL({ format: 'png', quality: 0.8 }); this.download = 'canvas.png'; } 該文章在 2023/5/23 10:36:40 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
