ikuaitu / vue-fabric-editor Goto Github PK

/**
 * 
 * 实现 fabricjs 支持在四个边角按下旋转元素
 * @author 晗萧 <[email protected]>
 * @version 1.0.0
 * 
 */

//渲染自定义图标
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();
    }
}

//定义旋转光标样式，根据转动角度设定光标旋转
function rotateIcon(angle){
    return `url("data:image/svg+xml,%3Csvg height='18' width='18' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'%3E%3Cg fill='none' transform='rotate(`
    + angle
    +` 16 16)'%3E%3Cpath d='M22.4484 0L32 9.57891L22.4484 19.1478V13.1032C17.6121 13.8563 13.7935 17.6618 13.0479 22.4914H19.2141L9.60201 32.01L0 22.4813H6.54912C7.36524 14.1073 14.0453 7.44023 22.4484 6.61688V0Z' fill='white'/%3E%3Cpath d='M24.0605 3.89587L29.7229 9.57896L24.0605 15.252V11.3562C17.0479 11.4365 11.3753 17.0895 11.3048 24.0879H15.3048L9.60201 29.7308L3.90932 24.0879H8.0806C8.14106 15.3223 15.2645 8.22345 24.0605 8.14313V3.89587Z' fill='black'/%3E%3C/g%3E%3C/svg%3E ") 12 12,crosshair`
}
//添加旋转控制响应区域
fabric.Object.prototype.controls.mtr = new fabric.Control({
    x: -0.5,
    y: -0.5,
    offsetY: -10,
    offsetX: -10,
    rotate: 20,
    actionName: 'rotate',
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    render: ()=>{}
});//↖左上
fabric.Object.prototype.controls.mtr2 = new fabric.Control({
    x: 0.5,
    y: -0.5,
    offsetY: -10,
    offsetX: 10,
    rotate: 20,
    actionName: 'rotate',
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    render: ()=>{}
});//↗右上
fabric.Object.prototype.controls.mtr3 = new fabric.Control({
    x: 0.5,
    y: 0.5,
    offsetY: 10,
    offsetX: 10,
    rotate: 20,
    actionName: 'rotate',
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    render: ()=>{}
});//↘右下
fabric.Object.prototype.controls.mtr4 = new fabric.Control({
    x: -0.5,
    y: 0.5,
    offsetY: 10,
    offsetX: -10,
    rotate: 20,
    actionName: 'rotate',
    actionHandler: fabric.controlsUtils.rotationWithSnapping,
    render: ()=>{}
});//↙左下

//渲染时，执行
canvas2.on('after:render', function() {
    if(canvas2.getActiveObject()){
        fabric.Object.prototype.controls.mtr.cursorStyle = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2)))
        fabric.Object.prototype.controls.mtr2.cursorStyle = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+90)
        fabric.Object.prototype.controls.mtr3.cursorStyle = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+180)
        fabric.Object.prototype.controls.mtr4.cursorStyle = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+270)
    }
});

//旋转时，实时更新旋转控制图标
canvas2.on('object:rotating', function(event) {
    var body=document.getElementById('editor').nextSibling;
    switch (event.transform.corner) {
        case "mtr":
            body.style.cursor = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2)))
            break;
        case "mtr2":
            body.style.cursor = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+90)
            break;
        case "mtr3":
            body.style.cursor = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+180)
            break;
        case "mtr4":
            body.style.cursor = rotateIcon(Number(canvas2.getActiveObject().angle.toFixed(2))+270)
            break;
        default:
            break;
    }//设置四角旋转光标
})