对象控制点自定义
<p><a href="https://ithelp.ithome.com.tw/articles/10206410" title="Day 15 - Fabricjs 物件控制項樣式調整">Day 15 - Fabricjs 物件控制項樣式調整</a></p>
<p><a href="https://ithelp.ithome.com.tw/articles/10209056" title="Day 26 - Fabricjs 進階自訂控制項">Day 26 - Fabricjs 進階自訂控制項</a></p>
<p><a href="http://fabricjs.com/custom-control-render" title="Custom controls, render and actions">Custom controls, render and actions</a></p>
<p><a href="http://fabricjs.com/controls-customization" title="Controls customization">Controls customization</a></p>
<p><a href="http://fabricjs.com/customization" title="Customization">Customization</a></p>
<p><a href="https://github.com/fabricjs/fabric.js/blob/master/src/mixins/default_controls.js" title="default_controls.js">default_controls.js</a></p>
<h4>扩展支持icon</h4>
<pre><code class="language-javascript"> // Controls对象扩展 支持icon
// 9个控制点都使用默认图标
// cornerStyle ='icon'
// 9个控制点都使用同一个img对象
// cornerStyle = oImg
// 每个控制点使用不同img对象
// cornerStyle = {ml: oImg, mr: oImg, mb: oImg, mt: oImg, tl: oImg, tr: oImg,bl: oImg, br: oImg, mtr: oImg }
function extendControls() {
let defaultIcon = "data:image/svg+xml,%3Csvg%20t%3D%221606356506558%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%224891%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M69.3%20512a442.7%20442.7%200%201%200%20885.4%200%20442.7%20442.7%200%201%200-885.4%200z%22%20fill%3D%22%239BBFFD%22%20fill-opacity%3D%22.6%22%20p-id%3D%224892%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M171.536%20512a340.464%20340.464%200%201%200%20680.928%200%20340.464%20340.464%200%201%200-680.928%200z%22%20fill%3D%22%23377FFC%22%20fill-opacity%3D%22.8%22%20p-id%3D%224893%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E";
let defaultImg = document.createElement('img');
defaultImg.src = defaultIcon;
function _getCoordIcon(left, top, styleOverride, fabricObject) {
let cornerStyle = styleOverride.cornerStyle || fabricObject.cornerStyle
let oCoords = styleOverride.oCoords || fabricObject.oCoords
for (let k in oCoords) {
if (oCoords[k].x == left && oCoords[k].y == top) {
return cornerStyle.hasOwnProperty(k) ? cornerStyle[k] : defaultImg
}
}
return defaultImg
}
fabric.controlsUtils.renderIconControl = function (ctx, left, top, styleOverride, fabricObject) {
let size = styleOverride.cornerSize || fabricObject.cornerSize;
let cornerStyle = styleOverride.cornerStyle || fabricObject.cornerStyle;
// 9个控制点使用同一个img对象
// cornerStyle = oImg
// 每个控制点使用不同img对象
// cornerStyle = {ml: oImg, mr: oImg, mb: oImg, mt: oImg, tl: oImg, tr: oImg,bl: oImg, br: oImg, mtr: oImg }
let icon = (cornerStyle.width && cornerStyle.height)
? cornerStyle
: _getCoordIcon(left, top, styleOverride, fabricObject)
ctx.save();
ctx.translate(left, top);
ctx.globalAlpha = 1;
ctx.drawImage(icon, -size / 2, -size / 2, size, size);
ctx.restore();
}
fabric.Control.prototype.render = function (ctx, left, top, styleOverride, fabricObject) {
styleOverride = styleOverride || {};
let connerStyle = styleOverride.cornerStyle || fabricObject.cornerStyle;
if (typeof connerStyle == 'object' || connerStyle == 'icon') {
fabric.controlsUtils.renderIconControl.call(this, ctx, left, top, styleOverride, fabricObject);
} else if (connerStyle == 'circle') {
fabric.controlsUtils.renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject);
} else {
fabric.controlsUtils.renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject);
}
}
}</code></pre>
<pre><code class="language-javascript"> // 修改控制器样式
let deleteIcon = document.createElement('img')
deleteIcon.src = "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";
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
x: 0,
y: -0.8,
offsetX: 0,
offsetY: 0,
cornerSize: 16,
// cursorStyle: 'pointer', //鼠标样式
mouseUpHandler(eventData, target) {
let canvas = target.canvas;
canvas.getActiveObject().set({fill: 'blue'})
canvas.requestRenderAll()
// return
// canvas.remove(target)
// canvas.requestRenderAll()
},
render(ctx, left, top, styleOverride, fabricObject) {
let size = this.cornerSize
ctx.save()
ctx.translate(left, top)
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle))
ctx.drawImage(deleteIcon, -size/2, -size/2, size, size)
ctx.restore()
}
})</code></pre>