38 lines
1.2 KiB
JavaScript
38 lines
1.2 KiB
JavaScript
import { fabric } from "fabric-with-all";
|
|
|
|
/**
|
|
* Factory for creating optimized fabric canvas instances
|
|
*/
|
|
export const createCanvas = (elementId, options = {}) => {
|
|
// Create the canvas instance
|
|
const canvas = new fabric.Canvas(elementId, {
|
|
enableRetinaScaling: true,
|
|
renderOnAddRemove: false,
|
|
preserveObjectStacking: true, // 保持对象堆叠顺序
|
|
// skipOffscreen: true, // 跳过离屏渲染
|
|
imageSmoothingEnabled: true, // 启用图像平滑 - 抗锯齿
|
|
imageSmoothingQuality: "high", // 设置高质量图像平滑
|
|
fireMiddleClick: true,// 启用中键点击事件
|
|
fireRightClick: true,// 启用右键点击事件
|
|
stopContextMenu: true,// 阻止浏览器默认的右键菜单弹出，避免干扰
|
|
...options,
|
|
});
|
|
|
|
return canvas;
|
|
};
|
|
|
|
/**
|
|
* Utility to create a static canvas (for improved performance when interaction is not needed)
|
|
*/
|
|
export const createStaticCanvas = (elementId, options = {}) => {
|
|
const canvas = new fabric.StaticCanvas(elementId, {
|
|
enableRetinaScaling: true,
|
|
imageSmoothingEnabled: true, // 启用图像平滑 - 抗锯齿
|
|
imageSmoothingQuality: "high", // 设置高质量图像平滑
|
|
skipOffscreen: false, // 不跳过离屏渲染
|
|
...options,
|
|
});
|
|
|
|
return canvas;
|
|
};
|