243 lines
7.4 KiB
TypeScript
243 lines
7.4 KiB
TypeScript
import { ref } from 'vue'
|
||
import { fabric } from 'fabric-with-all'
|
||
import { createId } from '../../tools/tools'
|
||
import { exportObjectsToImage, exportObjectToThumbnail } from '../tools/exportMethod'
|
||
import { OperationType } from '../tools/layerHelper'
|
||
import { getArrowPath, getLinePath, cloneObjects, getStarArr } from '../tools/canvasMethod'
|
||
|
||
export const FillSourceToBase64 = (source) => {
|
||
if (source?.toDataURL) {
|
||
return source.toDataURL?.();
|
||
} else if (source?.src) {
|
||
return source.src;
|
||
}
|
||
return source;
|
||
}
|
||
|
||
/**
|
||
* 图片添加gap转换
|
||
* @param {HTMLCanvasElement} image - img元素
|
||
* @param {Number} gapX - 水平gap
|
||
* @param {Number} gapY - 垂直gap
|
||
* @returns {HTMLCanvasElement} 转换后的canvas元素
|
||
*/
|
||
export function imageAddGapToCanvas(image, gapX, gapY) {
|
||
// 创建透明 Canvas
|
||
const tcanvas = document.createElement('canvas');
|
||
tcanvas.width = image.width + gapX;
|
||
tcanvas.height = image.height + gapY;
|
||
const ctx = tcanvas.getContext('2d', { willReadFrequently: true });
|
||
ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
|
||
ctx.drawImage(image, 0, 0);
|
||
return tcanvas;
|
||
}
|
||
|
||
|
||
/**
|
||
* 创建缩放+旋转的变换矩阵
|
||
* @param {number} scale - 缩放比例
|
||
* @param {number} angle - 旋转角度（度）
|
||
* @returns {Array} 变换矩阵 [a, b, c, d, e, f]
|
||
*/
|
||
export function createPatternTransform(scale, angle) {
|
||
const angle_ = angle * Math.PI / 180;
|
||
const cos = Math.cos(angle_);
|
||
const sin = Math.sin(angle_);
|
||
|
||
// 先缩放，后旋转
|
||
return [
|
||
scale * cos, // a
|
||
scale * sin, // b
|
||
-scale * sin, // c
|
||
scale * cos, // d
|
||
0, // e (水平位移)
|
||
0 // f (垂直位移)
|
||
];
|
||
}
|
||
/**
|
||
* 获取变换矩阵的缩放、旋转
|
||
* @param {Array} Transform - 变换矩阵、
|
||
* @returns {Object} 缩放、旋转角度 {scale, angle}
|
||
*/
|
||
export function getTransformScaleAngle(Transform) {
|
||
const a = Transform[0];
|
||
const b = Transform[1];
|
||
const c = Transform[2];
|
||
const d = Transform[3];
|
||
const scale = Math.sqrt(a * a + b * b);
|
||
const angle = Math.round(Math.atan2(b, a) * 180 / Math.PI);
|
||
return { scale, angle };
|
||
}
|
||
|
||
export class ObjectManager {
|
||
stateManager: any
|
||
canvasManager: any
|
||
layerManager: any
|
||
constructor(options) {
|
||
this.stateManager = options.stateManager;
|
||
this.canvasManager = options.canvasManager;
|
||
this.layerManager = options.layerManager
|
||
}
|
||
onMounted() { }
|
||
/** 设置混合模式 */
|
||
setBlendMode(id: string, blendMode: string) {
|
||
const object = this.canvasManager.getObjectById(id)
|
||
if (!object) return console.warn('设置混合模式失败，对象不存在ID:', id)
|
||
object.set("globalCompositeOperation", blendMode)
|
||
this.canvasManager.renderAll()
|
||
}
|
||
|
||
/** 设置平铺状态 */
|
||
setFillRepeat(id: string, isRecord = true) {
|
||
const object = this.canvasManager.getObjectById(id)
|
||
if (!object) return console.warn('设置平铺状态失败，对象不存在ID:', id)
|
||
if (object.type !== 'image') return console.warn('设置平铺状态失败，对象不是图片类型:', id)
|
||
|
||
// 创建透明 Canvas
|
||
const imgEl = object.getElement();
|
||
const tcanvas = document.createElement('canvas');
|
||
tcanvas.width = imgEl.width;
|
||
tcanvas.height = imgEl.height;
|
||
const ctx = tcanvas.getContext('2d');
|
||
ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
|
||
ctx.drawImage(imgEl, 0, 0);
|
||
const fill = {
|
||
source: FillSourceToBase64(imgEl),
|
||
gapX: 0,
|
||
gapY: 0,
|
||
}
|
||
const pattern = new fabric.Pattern({
|
||
source: tcanvas,
|
||
repeat: 'repeat',
|
||
patternTransform: createPatternTransform(1, 0),
|
||
offsetX: 0, // 水平偏移
|
||
offsetY: 0, // 垂直偏移
|
||
});
|
||
const info = {
|
||
...object.info,
|
||
fill,
|
||
}
|
||
const rect = new fabric.Rect({
|
||
width: object.width,
|
||
height: object.height,
|
||
top: object.top,
|
||
left: object.left,
|
||
angle: object.angle,
|
||
scaleX: object.scaleX,
|
||
scaleY: object.scaleY,
|
||
flipX: object.flipX,
|
||
flipY: object.flipY,
|
||
globalCompositeOperation: object.globalCompositeOperation,
|
||
originX: "left",
|
||
originY: "top",
|
||
info,
|
||
});
|
||
rect.set("fill", pattern)
|
||
this.canvasManager.canvas.remove(object)
|
||
this.canvasManager.add(rect, isRecord)
|
||
}
|
||
/** 获取填充对象 */
|
||
getFillRepeatObject(id: string) {
|
||
const object = this.canvasManager.getObjectById(id)
|
||
if (!object) {
|
||
console.warn('getFillRepeatObject 对象不存在ID:', id)
|
||
return null
|
||
}
|
||
if (object.type !== 'rect') {
|
||
console.warn('getFillRepeatObject 对象不是矩形类型:', id)
|
||
return null
|
||
}
|
||
if (object.fill?.repeat !== 'repeat') {
|
||
console.warn('getFillRepeatObject 对象不是平铺填充类型:', id)
|
||
return null
|
||
}
|
||
return object
|
||
}
|
||
/**
|
||
* 修改平铺参数
|
||
* @param id 目标对象ID
|
||
* @param options 参数
|
||
* @param options.scale 缩放比例
|
||
* @param options.angle 旋转角度
|
||
* @param options.offsetX 水平偏移
|
||
* @param options.offsetY 垂直偏移
|
||
*/
|
||
async updateFillRepeatTransform(id: string, options: any, isRecord: boolean) {
|
||
const object = this.getFillRepeatObject(id)
|
||
if (!object) return null
|
||
const fill = object.get("fill");
|
||
const scale = options.hasOwnProperty('scale') ? options.scale : getTransformScaleAngle(fill.patternTransform).scale
|
||
const angle = options.hasOwnProperty('angle') ? options.angle : getTransformScaleAngle(fill.patternTransform).angle
|
||
const offsetX = options.hasOwnProperty('offsetX') ? options.offsetX : fill.offsetX
|
||
const offsetY = options.hasOwnProperty('offsetY') ? options.offsetY : fill.offsetY
|
||
fill.patternTransform = createPatternTransform(scale, angle)
|
||
fill.offsetX = offsetX
|
||
fill.offsetY = offsetY
|
||
object.set("fill", new fabric.Pattern(fill));
|
||
this.canvasManager.renderAll()
|
||
if (isRecord) {
|
||
this.stateManager.recordState()
|
||
this.layerManager.updateLayerThumbnailsById(id)
|
||
}
|
||
}
|
||
|
||
/** 修改平铺间隙
|
||
* @param id 目标对象ID
|
||
* @param options 间隙参数
|
||
* @param options.gapX 水平间隙
|
||
* @param options.gapY 垂直间隙
|
||
*/
|
||
async updateFillRepeatGap(id: string, options: any, isRecord: boolean) {
|
||
const object = this.getFillRepeatObject(id)
|
||
if (!object) return null
|
||
const gapX = options.hasOwnProperty('gapX') ? options.gapX : object.info.fill.gapX
|
||
const gapY = options.hasOwnProperty('gapY') ? options.gapY : object.info.fill.gapY
|
||
const fill = object.get("fill");
|
||
const image = new Image();
|
||
image.crossOrigin = "anonymous";
|
||
image.src = object.info.fill.source;
|
||
await image.decode();
|
||
fill.source = imageAddGapToCanvas(image, gapX, gapY)
|
||
object.info.fill.gapX = gapX
|
||
object.info.fill.gapY = gapY
|
||
object.set("fill", new fabric.Pattern(fill));
|
||
this.canvasManager.renderAll()
|
||
if (isRecord) {
|
||
this.stateManager.recordState()
|
||
this.layerManager.updateLayerThumbnailsById(id)
|
||
}
|
||
}
|
||
|
||
/** 修改属性
|
||
* @param id 目标对象ID
|
||
* @param options 参数
|
||
* @param isRecord 是否记录
|
||
*/
|
||
async updateProperty(id: string, options: any, isRecord: boolean) {
|
||
const object = this.canvasManager.getObjectById(id)
|
||
if (!object) return null
|
||
const type = object.type
|
||
const isWidth = object.hasOwnProperty('width')
|
||
const isHeight = object.hasOwnProperty('height')
|
||
if (isWidth || isHeight) {
|
||
let width = options.width
|
||
let height = options.height
|
||
if (type === "polygon") {
|
||
if (object.points.length === 10) {// 五角星
|
||
options.points = getStarArr(width, height)
|
||
}
|
||
} else if (type === "ellipse") {// 椭圆
|
||
options.rx = width / 2
|
||
options.ry = height / 2
|
||
}
|
||
}
|
||
object.set(options);
|
||
this.canvasManager.renderAll()
|
||
if (isRecord) {
|
||
this.stateManager.recordState()
|
||
this.layerManager.updateLayerThumbnailsById(id)
|
||
}
|
||
}
|
||
|
||
dispose() { }
|
||
} |