@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,
177 lines (176 loc) • 7.2 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const fabric = require("fabric");
const middlecontrol = require("../resources/editor/middlecontrol.svg.js");
const middlecontrolhoz = require("../resources/editor/middlecontrolhoz.svg.js");
const edgecontrol = require("../resources/editor/edgecontrol.svg.js");
const rotateicon = require("../resources/editor/rotateicon.svg.js");
function intervalControl() {
const verticalImgIcon = document.createElement("img");
verticalImgIcon.src = middlecontrol.default;
const horizontalImgIcon = document.createElement("img");
horizontalImgIcon.src = middlecontrolhoz.default;
function renderIcon(ctx, left, top, _styleOverride, fabricObject) {
const wsize = 20;
const hsize = 25;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(verticalImgIcon, -wsize / 2, -hsize / 2, wsize, hsize);
ctx.restore();
}
function renderIconHoz(ctx, left, top, _styleOverride, fabricObject) {
const wsize = 25;
const hsize = 20;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(horizontalImgIcon, -wsize / 2, -hsize / 2, wsize, hsize);
ctx.restore();
}
fabric.fabric.Object.prototype.controls.ml = new fabric.fabric.Control({
x: -0.5,
y: 0,
offsetX: -1,
cursorStyleHandler: fabric.fabric.controlsUtils.scaleSkewCursorStyleHandler,
actionHandler: fabric.fabric.controlsUtils.scalingXOrSkewingY,
getActionName: fabric.fabric.controlsUtils.scaleOrSkewActionName,
render: renderIcon
});
fabric.fabric.Object.prototype.controls.mr = new fabric.fabric.Control({
x: 0.5,
y: 0,
offsetX: 1,
cursorStyleHandler: fabric.fabric.controlsUtils.scaleSkewCursorStyleHandler,
actionHandler: fabric.fabric.controlsUtils.scalingXOrSkewingY,
getActionName: fabric.fabric.controlsUtils.scaleOrSkewActionName,
render: renderIcon
});
fabric.fabric.Object.prototype.controls.mb = new fabric.fabric.Control({
x: 0,
y: 0.5,
offsetY: 1,
cursorStyleHandler: fabric.fabric.controlsUtils.scaleSkewCursorStyleHandler,
actionHandler: fabric.fabric.controlsUtils.scalingYOrSkewingX,
getActionName: fabric.fabric.controlsUtils.scaleOrSkewActionName,
render: renderIconHoz
});
fabric.fabric.Object.prototype.controls.mt = new fabric.fabric.Control({
x: 0,
y: -0.5,
offsetY: -1,
cursorStyleHandler: fabric.fabric.controlsUtils.scaleSkewCursorStyleHandler,
actionHandler: fabric.fabric.controlsUtils.scalingYOrSkewingX,
getActionName: fabric.fabric.controlsUtils.scaleOrSkewActionName,
render: renderIconHoz
});
}
function peakControl() {
const img = document.createElement("img");
img.src = edgecontrol.default;
function renderIconEdge(ctx, left, top, _styleOverride, fabricObject) {
const wsize = 25;
const hsize = 25;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(img, -wsize / 2, -hsize / 2, wsize, hsize);
ctx.restore();
}
fabric.fabric.Object.prototype.controls.tl = new fabric.fabric.Control({
x: -0.5,
y: -0.5,
cursorStyleHandler: fabric.fabric.controlsUtils.scaleCursorStyleHandler,
actionHandler: fabric.fabric.controlsUtils.scalingEqually,
render: renderIconEdge
});
fabric.fabric.Object.prototype.controls.bl = new fabric.fabric.Control({
x: -0.5,
y: 0.5,
cursorStyleHandler: fabric.fabric.controlsUtils.scaleCursorStyleHandler,
actionHandler: fabric.fabric.controlsUtils.scalingEqually,
render: renderIconEdge
});
fabric.fabric.Object.prototype.controls.tr = new fabric.fabric.Control({
x: 0.5,
y: -0.5,
cursorStyleHandler: fabric.fabric.controlsUtils.scaleCursorStyleHandler,
actionHandler: fabric.fabric.controlsUtils.scalingEqually,
render: renderIconEdge
});
fabric.fabric.Object.prototype.controls.br = new fabric.fabric.Control({
x: 0.5,
y: 0.5,
cursorStyleHandler: fabric.fabric.controlsUtils.scaleCursorStyleHandler,
actionHandler: fabric.fabric.controlsUtils.scalingEqually,
render: renderIconEdge
});
}
function deleteControl(canvas) {
const 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";
const delImg = document.createElement("img");
delImg.src = deleteIcon;
function renderDelIcon(ctx, left, top, _styleOverride, fabricObject) {
const size = fabricObject.cornerSize;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(delImg, -size / 2, -size / 2, size, size);
ctx.restore();
}
function deleteObject() {
const activeObject = canvas.getActiveObjects();
if (activeObject) {
activeObject.map((item) => canvas.remove(item));
canvas.requestRenderAll();
canvas.discardActiveObject();
}
}
fabric.fabric.Object.prototype.controls.deleteControl = new fabric.fabric.Control({
x: 0.5,
y: -0.5,
offsetY: -16,
offsetX: 16,
cursorStyle: "pointer",
mouseUpHandler: deleteObject,
render: renderDelIcon,
cornerSize: 24
});
}
function rotationControl() {
const img = document.createElement("img");
img.src = rotateicon.default;
function renderIconRotate(ctx, left, top, _styleOverride, fabricObject) {
const wsize = 40;
const hsize = 40;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(img, -wsize / 2, -hsize / 2, wsize, hsize);
ctx.restore();
}
fabric.fabric.Object.prototype.controls.mtr = new fabric.fabric.Control({
x: 0,
y: 0.5,
cursorStyleHandler: fabric.fabric.controlsUtils.rotationStyleHandler,
actionHandler: fabric.fabric.controlsUtils.rotationWithSnapping,
offsetY: 30,
withConnecton: false,
actionName: "rotate",
render: renderIconRotate
});
}
function initControls(canvas) {
deleteControl(canvas);
peakControl();
intervalControl();
rotationControl();
fabric.fabric.Object.prototype.set({
transparentCorners: false,
borderScaleFactor: 2.5,
cornerStyle: "circle",
cornerStrokeColor: "#0E98FC",
borderOpacityWhenMoving: 1
});
}
exports.default = initControls;