aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 裁剪组裁剪跟随选择组移动

Browse Source
This commit is contained in:
bighuixiang
2025-07-14 01:00:23 +08:00
parent 96e13cb22a
commit 24e9ba8ae5
80 changed files with 2052 additions and 4292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/component/Canvas/CanvasEditor/managers/liquify/LiquifyWebGLManager.js
View File

@@ -61,8 +61,7 @@ export class LiquifyWebGLManager {
static isSupported() {
try {
const canvas = document.createElement("canvas");
const gl =
canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
return !!gl;
} catch (e) {
return false;
@@ -76,9 +75,7 @@ export class LiquifyWebGLManager {
try {
// 创建WebGL画布
this.canvas = document.createElement("canvas");
this.gl =
this.canvas.getContext("webgl") ||
this.canvas.getContext("experimental-webgl");
this.gl = this.canvas.getContext("webgl") || this.canvas.getContext("experimental-webgl");
if (!this.gl) {
throw new Error("WebGL不可用");
@@ -200,10 +197,7 @@ export class LiquifyWebGLManager {
}
`;
this.program = this._createProgram(
vertexShaderSource,
fragmentShaderSource
);
this.program = this._createProgram(vertexShaderSource, fragmentShaderSource);
}
/**
@@ -228,10 +222,7 @@ export class LiquifyWebGLManager {
_createProgram(vertexSource, fragmentSource) {
const gl = this.gl;
const vertexShader = this._createShader(gl.VERTEX_SHADER, vertexSource);
const fragmentShader = this._createShader(
gl.FRAGMENT_SHADER,
fragmentSource
);
const fragmentShader = this._createShader(gl.FRAGMENT_SHADER, fragmentSource);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
@@ -267,9 +258,7 @@ export class LiquifyWebGLManager {
*/
_createMeshBuffer() {
const gl = this.gl;
const vertices = new Float32Array([
-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1,
]);
const vertices = new Float32Array([-1, -1, 0, 0, 1, -1, 1, 0, -1, 1, 0, 1, 1, 1, 1, 1]);
this.meshBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.meshBuffer);
@@ -427,12 +416,8 @@ export class LiquifyWebGLManager {
}
// 计算拖拽向量（用于推拉模式）
const dragX = this.isDragging
? (x - this.initialMouseX) / this.canvas.width
: 0;
const dragY = this.isDragging
? -(y - this.initialMouseY) / this.canvas.height
: 0;
const dragX = this.isDragging ? (x - this.initialMouseX) / this.canvas.width : 0;
const dragY = this.isDragging ? -(y - this.initialMouseY) / this.canvas.height : 0;
// 获取模式索引
const modeIndex = Object.values(this.modes).indexOf(this.currentMode);
@@ -466,22 +451,13 @@ export class LiquifyWebGLManager {
// 读取结果并转换为ImageData
const pixels = new Uint8Array(this.canvas.width * this.canvas.height * 4);
gl.readPixels(
0,
0,
this.canvas.width,
this.canvas.height,
gl.RGBA,
gl.UNSIGNED_BYTE,
pixels
);
gl.readPixels(0, 0, this.canvas.width, this.canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
// 翻转Y轴以匹配ImageData格式
const flippedPixels = new Uint8ClampedArray(pixels.length);
for (let y = 0; y < this.canvas.height; y++) {
for (let x = 0; x < this.canvas.width; x++) {
const srcIndex =
((this.canvas.height - 1 - y) * this.canvas.width + x) * 4;
const srcIndex = ((this.canvas.height - 1 - y) * this.canvas.width + x) * 4;
const dstIndex = (y * this.canvas.width + x) * 4;
flippedPixels[dstIndex] = pixels[srcIndex];
flippedPixels[dstIndex + 1] = pixels[srcIndex + 1];
@@ -503,16 +479,7 @@ export class LiquifyWebGLManager {
// 将原始纹理复制到当前纹理
gl.bindTexture(gl.TEXTURE_2D, this.currentTexture);
gl.copyTexImage2D(
gl.TEXTURE_2D,
0,
gl.RGBA,
0,
0,
this.canvas.width,
this.canvas.height,
0
);
gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, this.canvas.width, this.canvas.height, 0);
// 读取原始纹理数据
gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
@@ -525,21 +492,9 @@ export class LiquifyWebGLManager {
);
const pixels = new Uint8Array(this.canvas.width * this.canvas.height * 4);
gl.readPixels(
0,
0,
this.canvas.width,
this.canvas.height,
gl.RGBA,
gl.UNSIGNED_BYTE,
pixels
);
gl.readPixels(0, 0, this.canvas.width, this.canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
return new ImageData(
new Uint8ClampedArray(pixels),
this.canvas.width,
this.canvas.height
);
return new ImageData(new Uint8ClampedArray(pixels), this.canvas.width, this.canvas.height);
}
/**