Fabric.js自定義控件

admin

2023年5月23日 10:59 本文熱度 514

雖然 Fabric.js 提供的基礎(chǔ)功能已經(jīng)很豐富了，但有時難免需要定制一些需求。比如本文要講的『自定義控件』。掌握創(chuàng)建自定義控件這個功能，能夠創(chuàng)建更加精美和實用的圖形應(yīng)用程序，提高用戶體驗和用戶滿意度。

盡管 Fabric.js 的文檔很一般，但 demo 還挺豐富。本文講解 Fabric.js 官網(wǎng)收錄的 Custom controls, render and actions 。

自定義控件

先看看官方例子

這個例子創(chuàng)建了2個自定義控件，一個是復(fù)制，一個是刪除。

官方代碼我會放到文末，接下來我們試著創(chuàng)建一個“自定義刪除控件”。

初始化畫布和頁面元素

按照 Custom controls, render and actions^[2] 的樣式創(chuàng)建一個矩形。

<canvas id="c" width="500" height="400" style="border:1px solid #ccc"></canvas>
 
<script>
  // 綁定頁面畫布
  let canvas = new fabric.Canvas('c')
 
  // 創(chuàng)建矩形
  let rect = new fabric.Rect({
    left: 100,
    top: 50,
    fill: 'yellow',
    width: 200,
    height: 100,
    objectCaching: false,
    stroke: 'lightgreen',
    strokeWidth: 4,
  })
 
  // 將矩形添加到畫布里
  canvas.add(rect)
</script>

使用上面的代碼就可以在畫布中創(chuàng)建一個矩形。如果你對這些代碼還不太熟悉的話，推薦閱讀一下《Fabric.js 中文入門教程》

創(chuàng)建刪除按鈕

創(chuàng)建自定義控件通常有一下2步操作：

創(chuàng)建控件
添加功能事件

Fabric.js 提供了 fabric.Control() 方法創(chuàng)建自定義控件。該方法可以定義控件的基礎(chǔ)屬性和事件綁定，基礎(chǔ)屬性包括控件位置、鼠標經(jīng)過時的樣式等。常用的事件有鼠標按下（mouseDownHandler）、鼠標抬起（mouseUpHandler）、鼠標拖拽（actionHandler）等。

// 省略前面的代碼……
 
// 刪除元素的方法
function deleteObject(eventData, transform) {
  let target = transform.target
  let canvas = target.canvas
  canvas.remove(target) // 刪除元素
  canvas.requestRenderAll() // 刷新畫布
}
 
// 創(chuàng)建自定義控件并添加到矩形里
rect.controls.deleteControl = new fabric.Control({
  x: 0.5,
  y: -0.5,
  offsetY: -16,
  offsetX: 16,
  cursorStyle: 'pointer', // 鼠標移到控件時的指針樣式
  mouseUpHandler: deleteObject, // 鼠標抬起時觸發(fā)的事件
  render: function(ctx, left, top, styleOverride, fabricObject) { // 渲染一個粉紅色的正方形
    ctx.save()
    let size = this.cornerSize
    ctx.fillStyle = 'pink'
    ctx.translate(left, top)
    ctx.fillRect(-size / 2, -size / 2, size, size)
    ctx.restore()
  },
  cornerSize: 24
})

fabric.Control() 方法接收一個對象參數(shù)，該對象有一個 render 屬性用來渲染自定義控件。這里面涉及到部分原生 canvas 的基礎(chǔ)知識，比如 ctx.save() 和 ctx.restore() ，這部分內(nèi)容給我在《canvas 狀態(tài)管理》^[4] 里提到過，有興趣的工友可以去看看。

Custom controls, render and actions 的代碼

前面講到的就是創(chuàng)建自定義控件的基本方法， Fabric.js 官網(wǎng)收錄的 Custom controls, render and actions^[5] 例子中使用了 base64 格式的圖片作為自定義控件的展示元素，而且還加多了一個復(fù)制元素的控件。經(jīng)過前面的例子，相信你已經(jīng)能看得懂 Custom controls, render and actions^[6] 的代碼。

我把代碼復(fù)制到這里，有興趣的可以看看~

<div class="controls">
  <p>
    <button id="add" onclick="Add()">Add a rectangle</button>
  </p>
</div>
<canvas id="c" width="500" height="400" style="border:1px solid #ccc"></canvas>
 
<script src="../js/fabric.js"></script>
<script>
  var canvas = this.__canvas = new fabric.Canvas('c');
 
  var deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
 
  var cloneIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 55.699 55.699' width='100px' height='100px' xml:space='preserve'%3E%3Cpath style='fill:%23010002;' d='M51.51,18.001c-0.006-0.085-0.022-0.167-0.05-0.248c-0.012-0.034-0.02-0.067-0.035-0.1 c-0.049-0.106-0.109-0.206-0.194-0.291v-0.001l0,0c0,0-0.001-0.001-0.001-0.002L34.161,0.293c-0.086-0.087-0.188-0.148-0.295-0.197 c-0.027-0.013-0.057-0.02-0.086-0.03c-0.086-0.029-0.174-0.048-0.265-0.053C33.494,0.011,33.475,0,33.453,0H22.177 c-3.678,0-6.669,2.992-6.669,6.67v1.674h-4.663c-3.678,0-6.67,2.992-6.67,6.67V49.03c0,3.678,2.992,6.669,6.67,6.669h22.677 c3.677,0,6.669-2.991,6.669-6.669v-1.675h4.664c3.678,0,6.669-2.991,6.669-6.669V18.069C51.524,18.045,51.512,18.025,51.51,18.001z M34.454,3.414l13.655,13.655h-8.985c-2.575,0-4.67-2.095-4.67-4.67V3.414z M38.191,49.029c0,2.574-2.095,4.669-4.669,4.669H10.845 c-2.575,0-4.67-2.095-4.67-4.669V15.014c0-2.575,2.095-4.67,4.67-4.67h5.663h4.614v10.399c0,3.678,2.991,6.669,6.668,6.669h10.4 v18.942L38.191,49.029L38.191,49.029z M36.777,25.412h-8.986c-2.574,0-4.668-2.094-4.668-4.669v-8.985L36.777,25.412z M44.855,45.355h-4.664V26.412c0-0.023-0.012-0.044-0.014-0.067c-0.006-0.085-0.021-0.167-0.049-0.249 c-0.012-0.033-0.021-0.066-0.036-0.1c-0.048-0.105-0.109-0.205-0.194-0.29l0,0l0,0c0-0.001-0.001-0.002-0.001-0.002L22.829,8.637 c-0.087-0.086-0.188-0.147-0.295-0.196c-0.029-0.013-0.058-0.021-0.088-0.031c-0.086-0.03-0.172-0.048-0.263-0.053 c-0.021-0.002-0.04-0.013-0.062-0.013h-4.614V6.67c0-2.575,2.095-4.67,4.669-4.67h10.277v10.4c0,3.678,2.992,6.67,6.67,6.67h10.399 v21.616C49.524,43.26,47.429,45.355,44.855,45.355z'/%3E%3C/svg%3E%0A"
 
  var deleteImg = document.createElement('img');
  deleteImg.src = deleteIcon;
 
  var cloneImg = document.createElement('img');
  cloneImg.src = cloneIcon;
 
  fabric.Object.prototype.transparentCorners = false;
  fabric.Object.prototype.cornerColor = 'blue';
  fabric.Object.prototype.cornerStyle = 'circle';
 
  function Add() {
    var rect = new fabric.Rect({
      left: 100,
      top: 50,
      fill: 'yellow',
      width: 200,
      height: 100,
      objectCaching: false,
      stroke: 'lightgreen',
      strokeWidth: 4,
    });
 
    canvas.add(rect);
    canvas.setActiveObject(rect);
  }
 
  function renderIcon(icon) {
    return function renderIcon(ctx, left, top, styleOverride, fabricObject) {
      var size = this.cornerSize;
      ctx.save();
      ctx.translate(left, top);
      ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
      ctx.drawImage(icon, -size/2, -size/2, size, size);
      ctx.restore();
    }
  }
 
  fabric.Object.prototype.controls.deleteControl = new fabric.Control({
    x: 0.5,
    y: -0.5,
    offsetY: -16,
    offsetX: 16,
    cursorStyle: 'pointer',
    mouseUpHandler: deleteObject,
    render: renderIcon(deleteImg),
    cornerSize: 24
  });
 
  fabric.Object.prototype.controls.clone = new fabric.Control({
    x: -0.5,
    y: -0.5,
    offsetY: -16,
    offsetX: -16,
    cursorStyle: 'pointer',
    mouseUpHandler: cloneObject,
    render: renderIcon(cloneImg),
    cornerSize: 24
  });
 
  Add();
 
  function deleteObject(eventData, transform) {
    var target = transform.target;
  var canvas = target.canvas;
      canvas.remove(target);
      canvas.requestRenderAll();
 }
 
  function cloneObject(eventData, transform) {
    var target = transform.target;
    var canvas = target.canvas;
    target.clone(function(cloned) {
      cloned.left += 10;
      cloned.top += 10;
      canvas.add(cloned);
    });
  }
</script>

該文章在 2023/5/23 10:59:30 編輯過

關(guān)鍵字查詢

控件

自定義

相關(guān)文章

正在查詢...

點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。

點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務(wù)費用、相關(guān)報表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務(wù)都免費，不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。