@tencentcloud/roomkit-electron-vue3
Version:
<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,
98 lines (97 loc) • 3.53 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const fabric = require("fabric");
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`;
}
function initControlsRotate(canvas) {
fabric.fabric.Object.prototype.controls.mtr = new fabric.fabric.Control({
x: -0.5,
y: -0.5,
offsetY: -10,
offsetX: -10,
rotate: 20,
actionName: "rotate",
actionHandler: fabric.fabric.controlsUtils.rotationWithSnapping,
render: () => {
}
});
fabric.fabric.Object.prototype.controls.mtr2 = new fabric.fabric.Control({
x: 0.5,
y: -0.5,
offsetY: -10,
offsetX: 10,
rotate: 20,
actionName: "rotate",
actionHandler: fabric.fabric.controlsUtils.rotationWithSnapping,
render: () => {
}
});
fabric.fabric.Object.prototype.controls.mtr3 = new fabric.fabric.Control({
x: 0.5,
y: 0.5,
offsetY: 10,
offsetX: 10,
rotate: 20,
actionName: "rotate",
actionHandler: fabric.fabric.controlsUtils.rotationWithSnapping,
render: () => {
}
});
fabric.fabric.Object.prototype.controls.mtr4 = new fabric.fabric.Control({
x: -0.5,
y: 0.5,
offsetY: 10,
offsetX: -10,
rotate: 20,
actionName: "rotate",
actionHandler: fabric.fabric.controlsUtils.rotationWithSnapping,
render: () => {
}
});
canvas.on("after:render", () => {
const activeObject = canvas.getActiveObject();
if (!activeObject) return;
fabric.fabric.Object.prototype.controls.mtr.cursorStyle = rotateIcon(
Number(activeObject.angle.toFixed(2))
);
fabric.fabric.Object.prototype.controls.mtr2.cursorStyle = rotateIcon(
Number(activeObject.angle.toFixed(2)) + 90
);
fabric.fabric.Object.prototype.controls.mtr3.cursorStyle = rotateIcon(
Number(activeObject.angle.toFixed(2)) + 180
);
fabric.fabric.Object.prototype.controls.mtr4.cursorStyle = rotateIcon(
Number(activeObject.angle.toFixed(2)) + 270
);
});
canvas.on("object:rotating", (event) => {
var _a;
const activeObject = canvas.getActiveObject();
if (!activeObject) return;
const body = canvas.getElement().nextSibling;
switch ((_a = event.transform) == null ? void 0 : _a.corner) {
case "mtr":
body.style.cursor = rotateIcon(
Number(activeObject.angle.toFixed(2))
);
break;
case "mtr2":
body.style.cursor = rotateIcon(
Number(activeObject.angle.toFixed(2)) + 90
);
break;
case "mtr3":
body.style.cursor = rotateIcon(
Number(activeObject.angle.toFixed(2)) + 180
);
break;
case "mtr4":
body.style.cursor = rotateIcon(
Number(activeObject.angle.toFixed(2)) + 270
);
break;
}
});
}
exports.default = initControlsRotate;