@visactor/vrender 1.0.11 → 1.0.13-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.d.ts +1 -1
- package/cjs/index.js +11 -10
- package/cjs/index.js.map +1 -1
- package/dist/index.es.js +1271 -3
- package/dist/index.js +1277 -2
- package/dist/index.min.js +1 -1
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/index.js.map +1 -1
- package/package.json +4 -4
package/dist/index.es.js
CHANGED
|
@@ -35143,11 +35143,1279 @@ class StreamLight extends ACustomAnimate {
|
|
|
35143
35143
|
}
|
|
35144
35144
|
}
|
|
35145
35145
|
|
|
35146
|
+
class DisappearAnimateBase extends AStageAnimate {
|
|
35147
|
+
constructor(from, to, duration, easing, params) {
|
|
35148
|
+
super(from, to, duration, easing, params), this.webglCanvas = null, this.gl = null, this.program = null, this.currentAnimationRatio = 0, this.animationTime = 0;
|
|
35149
|
+
}
|
|
35150
|
+
onUpdate(end, ratio, out) {
|
|
35151
|
+
super.onUpdate(end, ratio, out), this.currentAnimationRatio = ratio, this.animationTime = ratio * Math.PI * 2;
|
|
35152
|
+
}
|
|
35153
|
+
getAnimationTime() {
|
|
35154
|
+
return this.currentAnimationRatio > 0 ? this.animationTime : Date.now() / 1e3;
|
|
35155
|
+
}
|
|
35156
|
+
getDurationFromParent() {
|
|
35157
|
+
return this.duration || 1e3;
|
|
35158
|
+
}
|
|
35159
|
+
initWebGL(canvas) {
|
|
35160
|
+
try {
|
|
35161
|
+
if (this.webglCanvas = vglobal.createCanvas({
|
|
35162
|
+
width: canvas.width,
|
|
35163
|
+
height: canvas.height,
|
|
35164
|
+
dpr: vglobal.devicePixelRatio
|
|
35165
|
+
}), !this.webglCanvas) return console.warn("WebGL canvas creation failed"), !1;
|
|
35166
|
+
this.webglCanvas.style.width = canvas.style.width || `${canvas.width}px`, this.webglCanvas.style.height = canvas.style.height || `${canvas.height}px`;
|
|
35167
|
+
let glContext = null;
|
|
35168
|
+
try {
|
|
35169
|
+
glContext = this.webglCanvas.getContext("webgl"), glContext || (glContext = this.webglCanvas.getContext("experimental-webgl"));
|
|
35170
|
+
} catch (e) {
|
|
35171
|
+
console.warn("Failed to get WebGL context:", e);
|
|
35172
|
+
}
|
|
35173
|
+
if (this.gl = glContext, !this.gl) return console.warn("WebGL not supported"), !1;
|
|
35174
|
+
const shaders = this.getShaderSources();
|
|
35175
|
+
return this.program = this.createShaderProgram(shaders.vertex, shaders.fragment), null !== this.program;
|
|
35176
|
+
} catch (error) {
|
|
35177
|
+
return console.warn("Failed to initialize WebGL:", error), !1;
|
|
35178
|
+
}
|
|
35179
|
+
}
|
|
35180
|
+
createShaderProgram(vertexSource, fragmentSource) {
|
|
35181
|
+
if (!this.gl) return null;
|
|
35182
|
+
const vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexSource),
|
|
35183
|
+
fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, fragmentSource);
|
|
35184
|
+
if (!vertexShader || !fragmentShader) return null;
|
|
35185
|
+
const program = this.gl.createProgram();
|
|
35186
|
+
return program ? (this.gl.attachShader(program, vertexShader), this.gl.attachShader(program, fragmentShader), this.gl.linkProgram(program), this.gl.getProgramParameter(program, this.gl.LINK_STATUS) ? program : (console.error("Shader program link error:", this.gl.getProgramInfoLog(program)), null)) : null;
|
|
35187
|
+
}
|
|
35188
|
+
createShader(type, source) {
|
|
35189
|
+
if (!this.gl) return null;
|
|
35190
|
+
const shader = this.gl.createShader(type);
|
|
35191
|
+
return shader ? (this.gl.shaderSource(shader, source), this.gl.compileShader(shader), this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS) ? shader : (console.error("Shader compile error:", this.gl.getShaderInfoLog(shader)), this.gl.deleteShader(shader), null)) : null;
|
|
35192
|
+
}
|
|
35193
|
+
setupWebGLState(canvas) {
|
|
35194
|
+
this.gl && this.webglCanvas && (this.webglCanvas.width === canvas.width && this.webglCanvas.height === canvas.height || (this.webglCanvas.width = canvas.width, this.webglCanvas.height = canvas.height), this.gl.viewport(0, 0, this.webglCanvas.width, this.webglCanvas.height), this.gl.clearColor(0, 0, 0, 0), this.gl.clear(this.gl.COLOR_BUFFER_BIT));
|
|
35195
|
+
}
|
|
35196
|
+
createFullScreenQuad() {
|
|
35197
|
+
if (!this.gl) return null;
|
|
35198
|
+
const vertices = new Float32Array([-1, -1, 0, 1, 1, -1, 1, 1, -1, 1, 0, 0, 1, 1, 1, 0]),
|
|
35199
|
+
vertexBuffer = this.gl.createBuffer();
|
|
35200
|
+
return this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer), this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW), vertexBuffer;
|
|
35201
|
+
}
|
|
35202
|
+
createTextureFromCanvas(canvas) {
|
|
35203
|
+
if (!this.gl) return null;
|
|
35204
|
+
const texture = this.gl.createTexture();
|
|
35205
|
+
return this.gl.activeTexture(this.gl.TEXTURE0), this.gl.bindTexture(this.gl.TEXTURE_2D, texture), this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, canvas), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR), texture;
|
|
35206
|
+
}
|
|
35207
|
+
setupVertexAttributes() {
|
|
35208
|
+
if (!this.gl || !this.program) return;
|
|
35209
|
+
const positionLocation = this.gl.getAttribLocation(this.program, "a_position"),
|
|
35210
|
+
texCoordLocation = this.gl.getAttribLocation(this.program, "a_texCoord");
|
|
35211
|
+
this.gl.enableVertexAttribArray(positionLocation), this.gl.vertexAttribPointer(positionLocation, 2, this.gl.FLOAT, !1, 16, 0), this.gl.enableVertexAttribArray(texCoordLocation), this.gl.vertexAttribPointer(texCoordLocation, 2, this.gl.FLOAT, !1, 16, 8);
|
|
35212
|
+
}
|
|
35213
|
+
createOutputCanvas(canvas) {
|
|
35214
|
+
const outputCanvas = vglobal.createCanvas({
|
|
35215
|
+
width: canvas.width,
|
|
35216
|
+
height: canvas.height,
|
|
35217
|
+
dpr: vglobal.devicePixelRatio
|
|
35218
|
+
}),
|
|
35219
|
+
ctx = outputCanvas.getContext("2d");
|
|
35220
|
+
return ctx ? (ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.drawImage(canvas, 0, 0), {
|
|
35221
|
+
canvas: outputCanvas,
|
|
35222
|
+
ctx: ctx
|
|
35223
|
+
}) : null;
|
|
35224
|
+
}
|
|
35225
|
+
getShaderSources() {
|
|
35226
|
+
return null;
|
|
35227
|
+
}
|
|
35228
|
+
applyWebGLEffect(canvas) {
|
|
35229
|
+
return null;
|
|
35230
|
+
}
|
|
35231
|
+
applyCanvas2DEffect(canvas) {
|
|
35232
|
+
return null;
|
|
35233
|
+
}
|
|
35234
|
+
supportsWebGL() {
|
|
35235
|
+
return null !== this.getShaderSources();
|
|
35236
|
+
}
|
|
35237
|
+
supportsCanvas2D() {
|
|
35238
|
+
return this.applyCanvas2DEffect !== DisappearAnimateBase.prototype.applyCanvas2DEffect;
|
|
35239
|
+
}
|
|
35240
|
+
release() {
|
|
35241
|
+
super.release(), this.gl && (this.program && (this.gl.deleteProgram(this.program), this.program = null), this.gl = null), this.webglCanvas && (this.webglCanvas = null), this.currentAnimationRatio = 0, this.animationTime = 0;
|
|
35242
|
+
}
|
|
35243
|
+
afterStageRender(stage, canvas) {
|
|
35244
|
+
let result = null;
|
|
35245
|
+
if (this.supportsWebGL() && (this.gl || this.initWebGL(canvas) || console.warn("WebGL初始化失败,尝试Canvas 2D回退"), this.gl)) {
|
|
35246
|
+
if (result = this.applyWebGLEffect(canvas), result) return result;
|
|
35247
|
+
console.warn("WebGL特效执行失败,尝试Canvas 2D回退");
|
|
35248
|
+
}
|
|
35249
|
+
if (this.supportsCanvas2D()) {
|
|
35250
|
+
if (result = this.applyCanvas2DEffect(canvas), result) return result;
|
|
35251
|
+
console.warn("Canvas 2D特效执行失败");
|
|
35252
|
+
}
|
|
35253
|
+
return this.supportsWebGL() || this.supportsCanvas2D() || console.error(`特效类 ${this.constructor.name} 未实现任何渲染方法。请实现 applyWebGLEffect 或 applyCanvas2DEffect 方法。`), canvas;
|
|
35254
|
+
}
|
|
35255
|
+
}
|
|
35256
|
+
|
|
35257
|
+
class Canvas2DEffectBase extends DisappearAnimateBase {
|
|
35258
|
+
constructor(from, to, duration, easing, params) {
|
|
35259
|
+
super(from, to, duration, easing, params);
|
|
35260
|
+
}
|
|
35261
|
+
getShaderSources() {
|
|
35262
|
+
return null;
|
|
35263
|
+
}
|
|
35264
|
+
applyWebGLEffect(canvas) {
|
|
35265
|
+
return null;
|
|
35266
|
+
}
|
|
35267
|
+
}
|
|
35268
|
+
class HybridEffectBase extends DisappearAnimateBase {
|
|
35269
|
+
constructor(from, to, duration, easing, params) {
|
|
35270
|
+
super(from, to, duration, easing, params);
|
|
35271
|
+
}
|
|
35272
|
+
getShaderSources() {
|
|
35273
|
+
return null;
|
|
35274
|
+
}
|
|
35275
|
+
applyWebGLEffect(canvas) {
|
|
35276
|
+
return null;
|
|
35277
|
+
}
|
|
35278
|
+
applyCanvas2DEffect(canvas) {
|
|
35279
|
+
return null;
|
|
35280
|
+
}
|
|
35281
|
+
supportsWebGL() {
|
|
35282
|
+
return this.getShaderSources !== HybridEffectBase.prototype.getShaderSources && null !== this.getShaderSources();
|
|
35283
|
+
}
|
|
35284
|
+
supportsCanvas2D() {
|
|
35285
|
+
return this.applyCanvas2DEffect !== HybridEffectBase.prototype.applyCanvas2DEffect;
|
|
35286
|
+
}
|
|
35287
|
+
afterStageRender(stage, canvas) {
|
|
35288
|
+
var _a, _b;
|
|
35289
|
+
let result = null;
|
|
35290
|
+
if (null === (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.options) || void 0 === _b ? void 0 : _b.useWebGL) {
|
|
35291
|
+
if (this.supportsWebGL() && (this.gl || this.initWebGL(canvas) || console.warn("WebGL初始化失败,尝试Canvas 2D回退"), this.gl)) {
|
|
35292
|
+
if (result = this.applyWebGLEffect(canvas), result) return result;
|
|
35293
|
+
console.warn("WebGL特效执行失败,尝试Canvas 2D回退");
|
|
35294
|
+
}
|
|
35295
|
+
if (this.supportsCanvas2D()) {
|
|
35296
|
+
if (result = this.applyCanvas2DEffect(canvas), result) return result;
|
|
35297
|
+
console.warn("Canvas 2D特效执行失败");
|
|
35298
|
+
}
|
|
35299
|
+
} else if (this.supportsCanvas2D()) {
|
|
35300
|
+
if (result = this.applyCanvas2DEffect(canvas), result) return result;
|
|
35301
|
+
console.warn("Canvas 2D特效执行失败");
|
|
35302
|
+
} else console.warn(`${this.constructor.name}: useWebGL=false 但未实现Canvas 2D方法`);
|
|
35303
|
+
return this.supportsWebGL() || this.supportsCanvas2D() || console.error(`特效类 ${this.constructor.name} 未实现任何渲染方法。请实现 applyWebGLEffect 或 applyCanvas2DEffect 方法。`), canvas;
|
|
35304
|
+
}
|
|
35305
|
+
}
|
|
35306
|
+
|
|
35307
|
+
class ImageProcessUtils {
|
|
35308
|
+
static createTempCanvas(width, height, dpr) {
|
|
35309
|
+
return vglobal.createCanvas({
|
|
35310
|
+
width: width,
|
|
35311
|
+
height: height,
|
|
35312
|
+
dpr: dpr || vglobal.devicePixelRatio
|
|
35313
|
+
});
|
|
35314
|
+
}
|
|
35315
|
+
static cloneImageData(imageData) {
|
|
35316
|
+
const clonedData = new Uint8ClampedArray(imageData.data);
|
|
35317
|
+
return new ImageData(clonedData, imageData.width, imageData.height);
|
|
35318
|
+
}
|
|
35319
|
+
static lerp(start, end, t) {
|
|
35320
|
+
return start * (1 - t) + end * t;
|
|
35321
|
+
}
|
|
35322
|
+
static smoothstep(edge0, edge1, x) {
|
|
35323
|
+
const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
|
|
35324
|
+
return t * t * (3 - 2 * t);
|
|
35325
|
+
}
|
|
35326
|
+
static distance(x1, y1, x2, y2) {
|
|
35327
|
+
const dx = x2 - x1,
|
|
35328
|
+
dy = y2 - y1;
|
|
35329
|
+
return Math.sqrt(dx * dx + dy * dy);
|
|
35330
|
+
}
|
|
35331
|
+
static normalizeAngle(angle) {
|
|
35332
|
+
return (angle + Math.PI) / (2 * Math.PI);
|
|
35333
|
+
}
|
|
35334
|
+
static pixelNoise(x, y, pixelSize) {
|
|
35335
|
+
if (pixelSize <= 0) return 0;
|
|
35336
|
+
const gridX = Math.floor(x / pixelSize) * pixelSize,
|
|
35337
|
+
gridY = Math.floor(y / pixelSize) * pixelSize,
|
|
35338
|
+
n = 43758.5453 * Math.sin(12.9898 * gridX + 78.233 * gridY);
|
|
35339
|
+
return n - Math.floor(n);
|
|
35340
|
+
}
|
|
35341
|
+
static generateNoiseTexture(width, height) {
|
|
35342
|
+
const data = new Uint8Array(width * height);
|
|
35343
|
+
for (let i = 0; i < data.length; i++) data[i] = Math.floor(256 * Math.random());
|
|
35344
|
+
return data;
|
|
35345
|
+
}
|
|
35346
|
+
static applyCSSFilter(canvas, filter) {
|
|
35347
|
+
const outputCanvas = this.createTempCanvas(canvas.width, canvas.height),
|
|
35348
|
+
ctx = outputCanvas.getContext("2d");
|
|
35349
|
+
return ctx ? (ctx.filter = filter, ctx.drawImage(canvas, 0, 0), ctx.filter = "none", outputCanvas) : canvas;
|
|
35350
|
+
}
|
|
35351
|
+
static extractChannel(imageData, channelIndex) {
|
|
35352
|
+
const {
|
|
35353
|
+
data: data,
|
|
35354
|
+
width: width,
|
|
35355
|
+
height: height
|
|
35356
|
+
} = imageData,
|
|
35357
|
+
channelData = new Uint8ClampedArray(data.length);
|
|
35358
|
+
for (let i = 0; i < data.length; i += 4) channelData[i] = 0, channelData[i + 1] = 0, channelData[i + 2] = 0, channelData[i + 3] = data[i + 3], channelIndex >= 0 && channelIndex <= 2 && (channelData[i + channelIndex] = data[i + channelIndex]);
|
|
35359
|
+
return new ImageData(channelData, width, height);
|
|
35360
|
+
}
|
|
35361
|
+
static blendImageData(imageData1, imageData2, ratio) {
|
|
35362
|
+
const {
|
|
35363
|
+
data: data1,
|
|
35364
|
+
width: width,
|
|
35365
|
+
height: height
|
|
35366
|
+
} = imageData1,
|
|
35367
|
+
{
|
|
35368
|
+
data: data2
|
|
35369
|
+
} = imageData2,
|
|
35370
|
+
result = new Uint8ClampedArray(data1.length);
|
|
35371
|
+
for (let i = 0; i < data1.length; i += 4) result[i] = Math.round(this.lerp(data1[i], data2[i], ratio)), result[i + 1] = Math.round(this.lerp(data1[i + 1], data2[i + 1], ratio)), result[i + 2] = Math.round(this.lerp(data1[i + 2], data2[i + 2], ratio)), result[i + 3] = Math.round(this.lerp(data1[i + 3], data2[i + 3], ratio));
|
|
35372
|
+
return new ImageData(result, width, height);
|
|
35373
|
+
}
|
|
35374
|
+
static getLuminance(r, g, b) {
|
|
35375
|
+
return .299 * r + .587 * g + .114 * b;
|
|
35376
|
+
}
|
|
35377
|
+
static applySepiaToPixel(r, g, b) {
|
|
35378
|
+
return [Math.min(255, .393 * r + .769 * g + .189 * b), Math.min(255, .349 * r + .686 * g + .168 * b), Math.min(255, .272 * r + .534 * g + .131 * b)];
|
|
35379
|
+
}
|
|
35380
|
+
static calculateDynamicStrength(baseStrength, animationTime) {
|
|
35381
|
+
return baseStrength * (animationTime / (2 * Math.PI));
|
|
35382
|
+
}
|
|
35383
|
+
}
|
|
35384
|
+
class ShaderLibrary {}
|
|
35385
|
+
ShaderLibrary.STANDARD_VERTEX_SHADER = "\n attribute vec2 a_position;\n attribute vec2 a_texCoord;\n varying vec2 v_texCoord;\n\n void main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n v_texCoord = a_texCoord;\n }\n ", ShaderLibrary.SHADER_FUNCTIONS = "\n // 亮度计算函数\n float luminance(vec3 color) {\n return dot(color, vec3(0.299, 0.587, 0.114));\n }\n\n // 褐色调函数\n vec3 sepia(vec3 color) {\n float r = color.r * 0.393 + color.g * 0.769 + color.b * 0.189;\n float g = color.r * 0.349 + color.g * 0.686 + color.b * 0.168;\n float b = color.r * 0.272 + color.g * 0.534 + color.b * 0.131;\n return vec3(r, g, b);\n }\n\n // 线性插值函数\n float lerp(float a, float b, float t) {\n return a * (1.0 - t) + b * t;\n }\n\n\n // 简单噪声函数\n float pixelNoise(vec2 coord, float pixelSize) {\n vec2 gridCoord = floor(coord / pixelSize) * pixelSize;\n return fract(sin(dot(gridCoord, vec2(12.9898, 78.233))) * 43758.5453123);\n }\n\n // 动态强度计算\n float calculateDynamicStrength(float baseStrength, float time) {\n return baseStrength * (time / 6.28318531); // 2π\n }\n ";
|
|
35386
|
+
|
|
35387
|
+
class Dissolve extends HybridEffectBase {
|
|
35388
|
+
constructor(from, to, duration, easing, params) {
|
|
35389
|
+
var _a, _b, _c, _d;
|
|
35390
|
+
super(from, to, duration, easing, params), this.noiseData = null;
|
|
35391
|
+
const rawNoiseScale = null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.noiseScale,
|
|
35392
|
+
clampedNoiseScale = void 0 !== rawNoiseScale ? Math.max(0, Math.floor(rawNoiseScale)) : 8;
|
|
35393
|
+
this.dissolveConfig = {
|
|
35394
|
+
dissolveType: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.dissolveType) || "outward",
|
|
35395
|
+
useWebGL: void 0 === (null === (_c = null == params ? void 0 : params.options) || void 0 === _c ? void 0 : _c.useWebGL) || params.options.useWebGL,
|
|
35396
|
+
noiseScale: clampedNoiseScale,
|
|
35397
|
+
fadeEdge: void 0 === (null === (_d = null == params ? void 0 : params.options) || void 0 === _d ? void 0 : _d.fadeEdge) || params.options.fadeEdge
|
|
35398
|
+
};
|
|
35399
|
+
}
|
|
35400
|
+
getShaderSources() {
|
|
35401
|
+
return {
|
|
35402
|
+
vertex: ShaderLibrary.STANDARD_VERTEX_SHADER,
|
|
35403
|
+
fragment: `\n precision mediump float;\n uniform sampler2D u_texture;\n uniform sampler2D u_noiseTexture;\n uniform float u_time;\n uniform int u_dissolveType;\n uniform vec2 u_resolution;\n uniform float u_noiseScale;\n uniform bool u_fadeEdge;\n varying vec2 v_texCoord;\n\n ${ShaderLibrary.SHADER_FUNCTIONS}\n\n // 向外溶解函数\n float outwardDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n vec2 center = vec2(0.5, 0.5);\n float distFromCenter = length(uv - center);\n float maxDist = length(vec2(0.5, 0.5));\n\n // 归一化距离 (0为中心,1为边缘)\n float normalizedDist = distFromCenter / maxDist;\n\n // 向外溶解:从边缘开始溶解,time控制溶解进度\n // 增加安全边距,确保动画结束时完全溶解\n float edgeThreshold = 1.2 - time * 1.5;\n\n // 当pixelSize > 0时添加颗粒效果\n if (pixelSize > 0.0) {\n // 添加基于像素大小的噪声,让边缘呈现颗粒状\n vec2 pixelCoord = uv * resolution; // 转换为像素坐标\n float noiseValue = pixelNoise(pixelCoord, pixelSize);\n float noiseInfluence = (noiseValue - 0.5) * 0.4; // 增强噪声影响\n edgeThreshold += noiseInfluence;\n return normalizedDist > edgeThreshold ? 0.0 : 1.0;\n } else {\n // 平滑溶解:根据fadeEdge决定是否使用渐变\n if (u_fadeEdge) {\n // 柔和边缘:返回渐变值\n float fadeWidth = 0.15; // 渐变宽度\n return 1.0 - smoothstep(edgeThreshold - fadeWidth, edgeThreshold, normalizedDist);\n } else {\n // 硬边缘:返回0或1\n return normalizedDist > edgeThreshold ? 0.0 : 1.0;\n }\n }\n }\n\n // 向内溶解函数\n float inwardDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n vec2 center = vec2(0.5, 0.5);\n float distFromCenter = length(uv - center);\n float maxDist = length(vec2(0.5, 0.5));\n\n float normalizedDist = distFromCenter / maxDist;\n\n // 向内溶解:从中心开始溶解,time控制溶解进度\n // 增加系数,确保动画结束时完全溶解\n float centerThreshold = time * 1.4;\n\n // 当pixelSize > 0时添加颗粒效果\n if (pixelSize > 0.0) {\n vec2 pixelCoord = uv * resolution;\n float noiseValue = pixelNoise(pixelCoord, pixelSize);\n float noiseInfluence = (noiseValue - 0.5) * 0.4;\n centerThreshold += noiseInfluence;\n return normalizedDist < centerThreshold ? 0.0 : 1.0;\n } else {\n // 平滑溶解:根据fadeEdge决定是否使用渐变\n if (u_fadeEdge) {\n // 柔和边缘:返回渐变值\n float fadeWidth = 0.15; // 渐变宽度\n return smoothstep(centerThreshold, centerThreshold + fadeWidth, normalizedDist);\n } else {\n // 硬边缘:返回0或1\n return normalizedDist < centerThreshold ? 0.0 : 1.0;\n }\n }\n }\n\n // 径向溶解函数\n float radialDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n vec2 center = vec2(0.5, 0.5);\n float angle = atan(uv.y - center.y, uv.x - center.x);\n float normalizedAngle = (angle + 3.14159) / (2.0 * 3.14159);\n\n // 径向溶解:按角度顺序溶解,time控制溶解进度\n // 增加系数,确保动画结束时完全溶解\n float angleThreshold = time * 1.2;\n\n // 当pixelSize > 0时添加颗粒效果\n if (pixelSize > 0.0) {\n vec2 pixelCoord = uv * resolution;\n float noiseValue = pixelNoise(pixelCoord, pixelSize);\n float noiseInfluence = (noiseValue - 0.5) * 0.3;\n angleThreshold += noiseInfluence;\n return normalizedAngle < angleThreshold ? 0.0 : 1.0;\n } else {\n // 平滑溶解:根据fadeEdge决定是否使用渐变\n if (u_fadeEdge) {\n // 柔和边缘:返回渐变值\n float fadeWidth = 0.08; // 渐变宽度\n return smoothstep(angleThreshold, angleThreshold + fadeWidth, normalizedAngle);\n } else {\n // 硬边缘:返回0或1\n return normalizedAngle < angleThreshold ? 0.0 : 1.0;\n }\n }\n }\n\n // 从左到右溶解函数\n float leftToRightDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n // 左到右溶解:从x=0开始向x=1溶解\n float dissolvePosition = time * 1.2; // 增加系数确保完全溶解\n\n // 当pixelSize > 0时添加颗粒效果\n if (pixelSize > 0.0) {\n vec2 pixelCoord = uv * resolution;\n float noiseValue = pixelNoise(pixelCoord, pixelSize);\n float noiseInfluence = (noiseValue - 0.5) * 0.3;\n dissolvePosition += noiseInfluence;\n return uv.x < dissolvePosition ? 0.0 : 1.0;\n } else {\n // 平滑溶解:根据fadeEdge决定是否使用渐变\n if (u_fadeEdge) {\n // 柔和边缘:返回渐变值\n float fadeWidth = 0.08; // 渐变宽度\n return smoothstep(dissolvePosition, dissolvePosition + fadeWidth, uv.x);\n } else {\n // 硬边缘:返回0或1\n return uv.x < dissolvePosition ? 0.0 : 1.0;\n }\n }\n }\n\n // 从右到左溶解函数\n float rightToLeftDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n // 右到左溶解:从x=1开始向x=0溶解\n float dissolvePosition = 1.0 - time * 1.2; // 增加系数确保完全溶解\n\n // 当pixelSize > 0时添加颗粒效果\n if (pixelSize > 0.0) {\n vec2 pixelCoord = uv * resolution;\n float noiseValue = pixelNoise(pixelCoord, pixelSize);\n float noiseInfluence = (noiseValue - 0.5) * 0.3;\n dissolvePosition += noiseInfluence;\n return uv.x > dissolvePosition ? 0.0 : 1.0;\n } else {\n // 平滑溶解:根据fadeEdge决定是否使用渐变\n if (u_fadeEdge) {\n // 柔和边缘:返回渐变值\n float fadeWidth = 0.08; // 渐变宽度\n return smoothstep(dissolvePosition - fadeWidth, dissolvePosition, uv.x);\n } else {\n // 硬边缘:返回0或1\n return uv.x > dissolvePosition ? 0.0 : 1.0;\n }\n }\n }\n\n // 从上到下溶解函数\n float topToBottomDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n // 上到下溶解:从y=0开始向y=1溶解\n float dissolvePosition = time * 1.2; // 增加系数确保完全溶解\n\n // 当pixelSize > 0时添加颗粒效果\n if (pixelSize > 0.0) {\n vec2 pixelCoord = uv * resolution;\n float noiseValue = pixelNoise(pixelCoord, pixelSize);\n float noiseInfluence = (noiseValue - 0.5) * 0.3;\n dissolvePosition += noiseInfluence;\n return uv.y < dissolvePosition ? 0.0 : 1.0;\n } else {\n // 平滑溶解:根据fadeEdge决定是否使用渐变\n if (u_fadeEdge) {\n // 柔和边缘:返回渐变值\n float fadeWidth = 0.08; // 渐变宽度\n return smoothstep(dissolvePosition, dissolvePosition + fadeWidth, uv.y);\n } else {\n // 硬边缘:返回0或1\n return uv.y < dissolvePosition ? 0.0 : 1.0;\n }\n }\n }\n\n // 从下到上溶解函数\n float bottomToTopDissolve(vec2 uv, float time, float pixelSize, vec2 resolution) {\n // 下到上溶解:从y=1开始向y=0溶解\n float dissolvePosition = 1.0 - time * 1.2; // 增加系数确保完全溶解\n\n // 当pixelSize > 0时添加颗粒效果\n if (pixelSize > 0.0) {\n vec2 pixelCoord = uv * resolution;\n float noiseValue = pixelNoise(pixelCoord, pixelSize);\n float noiseInfluence = (noiseValue - 0.5) * 0.3;\n dissolvePosition += noiseInfluence;\n return uv.y > dissolvePosition ? 0.0 : 1.0;\n } else {\n // 平滑溶解:根据fadeEdge决定是否使用渐变\n if (u_fadeEdge) {\n // 柔和边缘:返回渐变值\n float fadeWidth = 0.08; // 渐变宽度\n return smoothstep(dissolvePosition - fadeWidth, dissolvePosition, uv.y);\n } else {\n // 硬边缘:返回0或1\n return uv.y > dissolvePosition ? 0.0 : 1.0;\n }\n }\n }\n\n void main() {\n vec2 uv = v_texCoord;\n vec4 texColor = texture2D(u_texture, uv);\n\n float alpha = 1.0;\n\n // 根据溶解类型选择对应的溶解函数\n if (u_dissolveType == 0) {\n alpha = outwardDissolve(uv, u_time, u_noiseScale, u_resolution);\n } else if (u_dissolveType == 1) {\n alpha = inwardDissolve(uv, u_time, u_noiseScale, u_resolution);\n } else if (u_dissolveType == 2) {\n alpha = radialDissolve(uv, u_time, u_noiseScale, u_resolution);\n } else if (u_dissolveType == 3) {\n alpha = leftToRightDissolve(uv, u_time, u_noiseScale, u_resolution);\n } else if (u_dissolveType == 4) {\n alpha = rightToLeftDissolve(uv, u_time, u_noiseScale, u_resolution);\n } else if (u_dissolveType == 5) {\n alpha = topToBottomDissolve(uv, u_time, u_noiseScale, u_resolution);\n } else if (u_dissolveType == 6) {\n alpha = bottomToTopDissolve(uv, u_time, u_noiseScale, u_resolution);\n }\n\n gl_FragColor = vec4(texColor.rgb, texColor.a * alpha);\n }\n `
|
|
35404
|
+
};
|
|
35405
|
+
}
|
|
35406
|
+
applyWebGLEffect(canvas) {
|
|
35407
|
+
if (!this.gl || !this.program || !this.webglCanvas) return canvas;
|
|
35408
|
+
this.setupWebGLState(canvas);
|
|
35409
|
+
const texture = this.createTextureFromCanvas(canvas);
|
|
35410
|
+
if (!texture) return canvas;
|
|
35411
|
+
this.noiseData || (this.noiseData = ImageProcessUtils.generateNoiseTexture(256, 256));
|
|
35412
|
+
const noiseTexture = this.gl.createTexture();
|
|
35413
|
+
this.gl.activeTexture(this.gl.TEXTURE1), this.gl.bindTexture(this.gl.TEXTURE_2D, noiseTexture), this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.LUMINANCE, 256, 256, 0, this.gl.LUMINANCE, this.gl.UNSIGNED_BYTE, this.noiseData), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.REPEAT), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.REPEAT), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR), this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
|
|
35414
|
+
const vertexBuffer = this.createFullScreenQuad();
|
|
35415
|
+
return vertexBuffer ? (this.gl.useProgram(this.program), this.setupVertexAttributes(), this.setUniforms(), this.gl.enable(this.gl.BLEND), this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA), this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4), this.gl.deleteTexture(texture), this.gl.deleteTexture(noiseTexture), this.gl.deleteBuffer(vertexBuffer), this.webglCanvas) : canvas;
|
|
35416
|
+
}
|
|
35417
|
+
setUniforms() {
|
|
35418
|
+
if (!this.gl || !this.program || !this.webglCanvas) return;
|
|
35419
|
+
const textureLocation = this.gl.getUniformLocation(this.program, "u_texture"),
|
|
35420
|
+
noiseTextureLocation = this.gl.getUniformLocation(this.program, "u_noiseTexture"),
|
|
35421
|
+
timeLocation = this.gl.getUniformLocation(this.program, "u_time"),
|
|
35422
|
+
dissolveTypeLocation = this.gl.getUniformLocation(this.program, "u_dissolveType"),
|
|
35423
|
+
resolutionLocation = this.gl.getUniformLocation(this.program, "u_resolution"),
|
|
35424
|
+
noiseScaleLocation = this.gl.getUniformLocation(this.program, "u_noiseScale"),
|
|
35425
|
+
fadeEdgeLocation = this.gl.getUniformLocation(this.program, "u_fadeEdge");
|
|
35426
|
+
this.gl.uniform1i(textureLocation, 0), this.gl.uniform1i(noiseTextureLocation, 1), this.gl.uniform1f(timeLocation, this.currentAnimationRatio), this.gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height), this.gl.uniform1f(noiseScaleLocation, this.dissolveConfig.noiseScale), this.gl.uniform1i(fadeEdgeLocation, this.dissolveConfig.fadeEdge ? 1 : 0);
|
|
35427
|
+
this.gl.uniform1i(dissolveTypeLocation, {
|
|
35428
|
+
outward: 0,
|
|
35429
|
+
inward: 1,
|
|
35430
|
+
radial: 2,
|
|
35431
|
+
leftToRight: 3,
|
|
35432
|
+
rightToLeft: 4,
|
|
35433
|
+
topToBottom: 5,
|
|
35434
|
+
bottomToTop: 6
|
|
35435
|
+
}[this.dissolveConfig.dissolveType] || 0);
|
|
35436
|
+
}
|
|
35437
|
+
applyCanvas2DEffect(canvas) {
|
|
35438
|
+
const outputCanvas = this.createOutputCanvas(canvas);
|
|
35439
|
+
if (!outputCanvas) return canvas;
|
|
35440
|
+
const {
|
|
35441
|
+
canvas: outputCanvasElement,
|
|
35442
|
+
ctx: ctx
|
|
35443
|
+
} = outputCanvas,
|
|
35444
|
+
imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
|
|
35445
|
+
progress = this.currentAnimationRatio;
|
|
35446
|
+
let dissolvedImageData;
|
|
35447
|
+
switch (this.dissolveConfig.dissolveType) {
|
|
35448
|
+
case "outward":
|
|
35449
|
+
dissolvedImageData = this.applyOutwardDissolve(imageData, progress);
|
|
35450
|
+
break;
|
|
35451
|
+
case "inward":
|
|
35452
|
+
dissolvedImageData = this.applyInwardDissolve(imageData, progress);
|
|
35453
|
+
break;
|
|
35454
|
+
case "radial":
|
|
35455
|
+
dissolvedImageData = this.applyRadialDissolve(imageData, progress);
|
|
35456
|
+
break;
|
|
35457
|
+
case "leftToRight":
|
|
35458
|
+
dissolvedImageData = this.applyLeftToRightDissolve(imageData, progress);
|
|
35459
|
+
break;
|
|
35460
|
+
case "rightToLeft":
|
|
35461
|
+
dissolvedImageData = this.applyRightToLeftDissolve(imageData, progress);
|
|
35462
|
+
break;
|
|
35463
|
+
case "topToBottom":
|
|
35464
|
+
dissolvedImageData = this.applyTopToBottomDissolve(imageData, progress);
|
|
35465
|
+
break;
|
|
35466
|
+
case "bottomToTop":
|
|
35467
|
+
dissolvedImageData = this.applyBottomToTopDissolve(imageData, progress);
|
|
35468
|
+
break;
|
|
35469
|
+
default:
|
|
35470
|
+
dissolvedImageData = imageData;
|
|
35471
|
+
}
|
|
35472
|
+
return ctx.putImageData(dissolvedImageData, 0, 0), outputCanvasElement;
|
|
35473
|
+
}
|
|
35474
|
+
applyOutwardDissolve(imageData, progress) {
|
|
35475
|
+
const {
|
|
35476
|
+
data: data,
|
|
35477
|
+
width: width,
|
|
35478
|
+
height: height
|
|
35479
|
+
} = imageData,
|
|
35480
|
+
result = new Uint8ClampedArray(data.length);
|
|
35481
|
+
result.set(data);
|
|
35482
|
+
const centerX = width / 2,
|
|
35483
|
+
centerY = height / 2,
|
|
35484
|
+
maxDist = Math.sqrt(centerX * centerX + centerY * centerY),
|
|
35485
|
+
pixelSize = this.dissolveConfig.noiseScale;
|
|
35486
|
+
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
35487
|
+
const dx = x - centerX,
|
|
35488
|
+
dy = y - centerY,
|
|
35489
|
+
normalizedDist = Math.sqrt(dx * dx + dy * dy) / maxDist;
|
|
35490
|
+
let dissolveThreshold = 1.2 - 1.4 * progress,
|
|
35491
|
+
alpha = 1;
|
|
35492
|
+
if (pixelSize > 0) {
|
|
35493
|
+
dissolveThreshold += .4 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedDist > dissolveThreshold ? 0 : 1;
|
|
35494
|
+
} else if (this.dissolveConfig.fadeEdge) {
|
|
35495
|
+
const fadeStart = dissolveThreshold - .15;
|
|
35496
|
+
alpha = normalizedDist < fadeStart ? 1 : normalizedDist > dissolveThreshold ? 0 : 1 - (normalizedDist - fadeStart) / (dissolveThreshold - fadeStart);
|
|
35497
|
+
} else alpha = normalizedDist > dissolveThreshold ? 0 : 1;
|
|
35498
|
+
const index = 4 * (y * width + x);
|
|
35499
|
+
result[index + 3] = Math.floor(result[index + 3] * alpha);
|
|
35500
|
+
}
|
|
35501
|
+
return new ImageData(result, width, height);
|
|
35502
|
+
}
|
|
35503
|
+
applyInwardDissolve(imageData, progress) {
|
|
35504
|
+
const {
|
|
35505
|
+
data: data,
|
|
35506
|
+
width: width,
|
|
35507
|
+
height: height
|
|
35508
|
+
} = imageData,
|
|
35509
|
+
result = new Uint8ClampedArray(data.length);
|
|
35510
|
+
result.set(data);
|
|
35511
|
+
const centerX = width / 2,
|
|
35512
|
+
centerY = height / 2,
|
|
35513
|
+
maxDist = Math.sqrt(centerX * centerX + centerY * centerY),
|
|
35514
|
+
pixelSize = this.dissolveConfig.noiseScale;
|
|
35515
|
+
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
35516
|
+
const dx = x - centerX,
|
|
35517
|
+
dy = y - centerY,
|
|
35518
|
+
normalizedDist = Math.sqrt(dx * dx + dy * dy) / maxDist;
|
|
35519
|
+
let dissolveThreshold = 1.4 * progress,
|
|
35520
|
+
alpha = 1;
|
|
35521
|
+
if (pixelSize > 0) {
|
|
35522
|
+
dissolveThreshold += .4 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedDist < dissolveThreshold ? 0 : 1;
|
|
35523
|
+
} else if (this.dissolveConfig.fadeEdge) {
|
|
35524
|
+
const fadeEnd = dissolveThreshold + .15;
|
|
35525
|
+
alpha = normalizedDist < dissolveThreshold ? 0 : normalizedDist > fadeEnd ? 1 : (normalizedDist - dissolveThreshold) / (fadeEnd - dissolveThreshold);
|
|
35526
|
+
} else alpha = normalizedDist < dissolveThreshold ? 0 : 1;
|
|
35527
|
+
const index = 4 * (y * width + x);
|
|
35528
|
+
result[index + 3] = Math.floor(result[index + 3] * alpha);
|
|
35529
|
+
}
|
|
35530
|
+
return new ImageData(result, width, height);
|
|
35531
|
+
}
|
|
35532
|
+
applyRadialDissolve(imageData, progress) {
|
|
35533
|
+
const {
|
|
35534
|
+
data: data,
|
|
35535
|
+
width: width,
|
|
35536
|
+
height: height
|
|
35537
|
+
} = imageData,
|
|
35538
|
+
result = new Uint8ClampedArray(data.length);
|
|
35539
|
+
result.set(data);
|
|
35540
|
+
const centerX = width / 2,
|
|
35541
|
+
centerY = height / 2,
|
|
35542
|
+
pixelSize = this.dissolveConfig.noiseScale;
|
|
35543
|
+
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
35544
|
+
const dx = x - centerX,
|
|
35545
|
+
dy = y - centerY,
|
|
35546
|
+
normalizedAngle = (Math.atan2(dy, dx) + Math.PI) / (2 * Math.PI);
|
|
35547
|
+
let dissolveThreshold = 1.2 * progress,
|
|
35548
|
+
alpha = 1;
|
|
35549
|
+
if (pixelSize > 0) {
|
|
35550
|
+
dissolveThreshold += .3 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedAngle < dissolveThreshold ? 0 : 1;
|
|
35551
|
+
} else if (this.dissolveConfig.fadeEdge) {
|
|
35552
|
+
const fadeEnd = dissolveThreshold + .08;
|
|
35553
|
+
alpha = normalizedAngle < dissolveThreshold ? 0 : normalizedAngle > fadeEnd ? 1 : (normalizedAngle - dissolveThreshold) / (fadeEnd - dissolveThreshold);
|
|
35554
|
+
} else alpha = normalizedAngle < dissolveThreshold ? 0 : 1;
|
|
35555
|
+
const index = 4 * (y * width + x);
|
|
35556
|
+
result[index + 3] = Math.floor(result[index + 3] * alpha);
|
|
35557
|
+
}
|
|
35558
|
+
return new ImageData(result, width, height);
|
|
35559
|
+
}
|
|
35560
|
+
applyLeftToRightDissolve(imageData, progress) {
|
|
35561
|
+
const {
|
|
35562
|
+
data: data,
|
|
35563
|
+
width: width,
|
|
35564
|
+
height: height
|
|
35565
|
+
} = imageData,
|
|
35566
|
+
result = new Uint8ClampedArray(data.length);
|
|
35567
|
+
result.set(data);
|
|
35568
|
+
const pixelSize = this.dissolveConfig.noiseScale;
|
|
35569
|
+
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
35570
|
+
const normalizedX = x / width;
|
|
35571
|
+
let dissolveThreshold = 1.2 * progress,
|
|
35572
|
+
alpha = 1;
|
|
35573
|
+
if (pixelSize > 0) {
|
|
35574
|
+
dissolveThreshold += .3 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedX < dissolveThreshold ? 0 : 1;
|
|
35575
|
+
} else if (this.dissolveConfig.fadeEdge) {
|
|
35576
|
+
const fadeEnd = dissolveThreshold + .08;
|
|
35577
|
+
alpha = normalizedX < dissolveThreshold ? 0 : normalizedX > fadeEnd ? 1 : (normalizedX - dissolveThreshold) / (fadeEnd - dissolveThreshold);
|
|
35578
|
+
} else alpha = normalizedX < dissolveThreshold ? 0 : 1;
|
|
35579
|
+
const index = 4 * (y * width + x);
|
|
35580
|
+
result[index + 3] = Math.floor(result[index + 3] * alpha);
|
|
35581
|
+
}
|
|
35582
|
+
return new ImageData(result, width, height);
|
|
35583
|
+
}
|
|
35584
|
+
applyRightToLeftDissolve(imageData, progress) {
|
|
35585
|
+
const {
|
|
35586
|
+
data: data,
|
|
35587
|
+
width: width,
|
|
35588
|
+
height: height
|
|
35589
|
+
} = imageData,
|
|
35590
|
+
result = new Uint8ClampedArray(data.length);
|
|
35591
|
+
result.set(data);
|
|
35592
|
+
const pixelSize = this.dissolveConfig.noiseScale;
|
|
35593
|
+
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
35594
|
+
const normalizedX = x / width;
|
|
35595
|
+
let dissolveThreshold = 1 - 1.2 * progress,
|
|
35596
|
+
alpha = 1;
|
|
35597
|
+
if (pixelSize > 0) {
|
|
35598
|
+
dissolveThreshold += .3 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedX > dissolveThreshold ? 0 : 1;
|
|
35599
|
+
} else if (this.dissolveConfig.fadeEdge) {
|
|
35600
|
+
const fadeStart = dissolveThreshold - .08;
|
|
35601
|
+
alpha = normalizedX < fadeStart ? 1 : normalizedX > dissolveThreshold ? 0 : 1 - (normalizedX - fadeStart) / (dissolveThreshold - fadeStart);
|
|
35602
|
+
} else alpha = normalizedX > dissolveThreshold ? 0 : 1;
|
|
35603
|
+
const index = 4 * (y * width + x);
|
|
35604
|
+
result[index + 3] = Math.floor(result[index + 3] * alpha);
|
|
35605
|
+
}
|
|
35606
|
+
return new ImageData(result, width, height);
|
|
35607
|
+
}
|
|
35608
|
+
applyTopToBottomDissolve(imageData, progress) {
|
|
35609
|
+
const {
|
|
35610
|
+
data: data,
|
|
35611
|
+
width: width,
|
|
35612
|
+
height: height
|
|
35613
|
+
} = imageData,
|
|
35614
|
+
result = new Uint8ClampedArray(data.length);
|
|
35615
|
+
result.set(data);
|
|
35616
|
+
const pixelSize = this.dissolveConfig.noiseScale;
|
|
35617
|
+
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
35618
|
+
const normalizedY = y / height;
|
|
35619
|
+
let dissolveThreshold = 1.2 * progress,
|
|
35620
|
+
alpha = 1;
|
|
35621
|
+
if (pixelSize > 0) {
|
|
35622
|
+
dissolveThreshold += .3 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedY < dissolveThreshold ? 0 : 1;
|
|
35623
|
+
} else if (this.dissolveConfig.fadeEdge) {
|
|
35624
|
+
const fadeEnd = dissolveThreshold + .08;
|
|
35625
|
+
alpha = normalizedY < dissolveThreshold ? 0 : normalizedY > fadeEnd ? 1 : (normalizedY - dissolveThreshold) / (fadeEnd - dissolveThreshold);
|
|
35626
|
+
} else alpha = normalizedY < dissolveThreshold ? 0 : 1;
|
|
35627
|
+
const index = 4 * (y * width + x);
|
|
35628
|
+
result[index + 3] = Math.floor(result[index + 3] * alpha);
|
|
35629
|
+
}
|
|
35630
|
+
return new ImageData(result, width, height);
|
|
35631
|
+
}
|
|
35632
|
+
applyBottomToTopDissolve(imageData, progress) {
|
|
35633
|
+
const {
|
|
35634
|
+
data: data,
|
|
35635
|
+
width: width,
|
|
35636
|
+
height: height
|
|
35637
|
+
} = imageData,
|
|
35638
|
+
result = new Uint8ClampedArray(data.length);
|
|
35639
|
+
result.set(data);
|
|
35640
|
+
const pixelSize = this.dissolveConfig.noiseScale;
|
|
35641
|
+
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
35642
|
+
const normalizedY = y / height;
|
|
35643
|
+
let dissolveThreshold = 1 - 1.2 * progress,
|
|
35644
|
+
alpha = 1;
|
|
35645
|
+
if (pixelSize > 0) {
|
|
35646
|
+
dissolveThreshold += .3 * (ImageProcessUtils.pixelNoise(x, y, pixelSize) - .5), alpha = normalizedY > dissolveThreshold ? 0 : 1;
|
|
35647
|
+
} else if (this.dissolveConfig.fadeEdge) {
|
|
35648
|
+
const fadeStart = dissolveThreshold - .08;
|
|
35649
|
+
alpha = normalizedY < fadeStart ? 1 : normalizedY > dissolveThreshold ? 0 : 1 - (normalizedY - fadeStart) / (dissolveThreshold - fadeStart);
|
|
35650
|
+
} else alpha = normalizedY > dissolveThreshold ? 0 : 1;
|
|
35651
|
+
const index = 4 * (y * width + x);
|
|
35652
|
+
result[index + 3] = Math.floor(result[index + 3] * alpha);
|
|
35653
|
+
}
|
|
35654
|
+
return new ImageData(result, width, height);
|
|
35655
|
+
}
|
|
35656
|
+
}
|
|
35657
|
+
|
|
35658
|
+
class Grayscale extends HybridEffectBase {
|
|
35659
|
+
constructor(from, to, duration, easing, params) {
|
|
35660
|
+
var _a, _b, _c;
|
|
35661
|
+
super(from, to, duration, easing, params);
|
|
35662
|
+
const rawStrength = void 0 !== (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.strength) ? params.options.strength : 1,
|
|
35663
|
+
clampedStrength = Math.max(0, Math.min(1, rawStrength));
|
|
35664
|
+
this.colorConfig = {
|
|
35665
|
+
effectType: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.effectType) || "grayscale",
|
|
35666
|
+
strength: clampedStrength,
|
|
35667
|
+
useWebGL: void 0 === (null === (_c = null == params ? void 0 : params.options) || void 0 === _c ? void 0 : _c.useWebGL) || params.options.useWebGL
|
|
35668
|
+
};
|
|
35669
|
+
}
|
|
35670
|
+
getShaderSources() {
|
|
35671
|
+
return {
|
|
35672
|
+
vertex: ShaderLibrary.STANDARD_VERTEX_SHADER,
|
|
35673
|
+
fragment: `\n precision mediump float;\n uniform sampler2D u_texture;\n uniform float u_time;\n uniform float u_strength;\n uniform int u_effectType;\n uniform vec2 u_resolution;\n varying vec2 v_texCoord;\n\n ${ShaderLibrary.SHADER_FUNCTIONS}\n\n void main() {\n vec2 uv = v_texCoord;\n vec4 originalColor = texture2D(u_texture, uv);\n vec3 color = originalColor.rgb;\n\n // 计算动态强度\n float dynamicStrength = calculateDynamicStrength(u_strength, u_time);\n\n if (u_effectType == 0) {\n // 灰度效果\n float gray = luminance(color);\n vec3 grayColor = vec3(gray);\n color = mix(color, grayColor, dynamicStrength);\n } else if (u_effectType == 1) {\n // 褐色调效果\n vec3 sepiaColor = sepia(color);\n color = mix(color, sepiaColor, dynamicStrength);\n }\n\n gl_FragColor = vec4(color, originalColor.a);\n }\n `
|
|
35674
|
+
};
|
|
35675
|
+
}
|
|
35676
|
+
applyWebGLEffect(canvas) {
|
|
35677
|
+
if (!this.gl || !this.program || !this.webglCanvas) return null;
|
|
35678
|
+
this.setupWebGLState(canvas);
|
|
35679
|
+
const texture = this.createTextureFromCanvas(canvas);
|
|
35680
|
+
if (!texture) return null;
|
|
35681
|
+
const vertexBuffer = this.createFullScreenQuad();
|
|
35682
|
+
if (!vertexBuffer) return this.gl.deleteTexture(texture), null;
|
|
35683
|
+
try {
|
|
35684
|
+
return this.gl.useProgram(this.program), this.setupVertexAttributes(), this.setColorUniforms(), this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4), this.webglCanvas;
|
|
35685
|
+
} finally {
|
|
35686
|
+
this.gl.deleteTexture(texture), this.gl.deleteBuffer(vertexBuffer);
|
|
35687
|
+
}
|
|
35688
|
+
}
|
|
35689
|
+
setColorUniforms() {
|
|
35690
|
+
if (!this.gl || !this.program) return;
|
|
35691
|
+
const currentTime = this.getAnimationTime(),
|
|
35692
|
+
timeLocation = this.gl.getUniformLocation(this.program, "u_time"),
|
|
35693
|
+
strengthLocation = this.gl.getUniformLocation(this.program, "u_strength"),
|
|
35694
|
+
effectTypeLocation = this.gl.getUniformLocation(this.program, "u_effectType"),
|
|
35695
|
+
resolutionLocation = this.gl.getUniformLocation(this.program, "u_resolution");
|
|
35696
|
+
this.gl.uniform1f(timeLocation, currentTime), this.gl.uniform1f(strengthLocation, this.colorConfig.strength), this.gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height);
|
|
35697
|
+
this.gl.uniform1i(effectTypeLocation, {
|
|
35698
|
+
grayscale: 0,
|
|
35699
|
+
sepia: 1
|
|
35700
|
+
}[this.colorConfig.effectType] || 0);
|
|
35701
|
+
}
|
|
35702
|
+
applyCanvas2DEffect(canvas) {
|
|
35703
|
+
if (this.colorConfig.strength <= 0) {
|
|
35704
|
+
const outputCanvas = this.createOutputCanvas(canvas);
|
|
35705
|
+
return outputCanvas ? outputCanvas.canvas : null;
|
|
35706
|
+
}
|
|
35707
|
+
if (this.canUseCSSFilter()) return this.applyCSSFilter(canvas);
|
|
35708
|
+
const outputCanvas = this.createOutputCanvas(canvas);
|
|
35709
|
+
if (!outputCanvas) return null;
|
|
35710
|
+
const {
|
|
35711
|
+
ctx: ctx
|
|
35712
|
+
} = outputCanvas;
|
|
35713
|
+
try {
|
|
35714
|
+
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
|
|
35715
|
+
currentTime = this.getAnimationTime();
|
|
35716
|
+
let processedImageData;
|
|
35717
|
+
switch (this.colorConfig.effectType) {
|
|
35718
|
+
case "grayscale":
|
|
35719
|
+
default:
|
|
35720
|
+
processedImageData = this.applyGrayscaleEffect(imageData, this.colorConfig.strength, currentTime);
|
|
35721
|
+
break;
|
|
35722
|
+
case "sepia":
|
|
35723
|
+
processedImageData = this.applySepiaEffect(imageData, this.colorConfig.strength, currentTime);
|
|
35724
|
+
}
|
|
35725
|
+
return ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.putImageData(processedImageData, 0, 0), outputCanvas.canvas;
|
|
35726
|
+
} catch (error) {
|
|
35727
|
+
return console.warn("Canvas 2D color effect failed:", error), null;
|
|
35728
|
+
}
|
|
35729
|
+
}
|
|
35730
|
+
canUseCSSFilter() {
|
|
35731
|
+
var _a;
|
|
35732
|
+
return !!window.useFilterAPI && "undefined" != typeof CSS && (null === (_a = CSS.supports) || void 0 === _a ? void 0 : _a.call(CSS, "filter", "grayscale(1)"));
|
|
35733
|
+
}
|
|
35734
|
+
applyCSSFilter(canvas) {
|
|
35735
|
+
try {
|
|
35736
|
+
const outputCanvas = ImageProcessUtils.createTempCanvas(canvas.width, canvas.height),
|
|
35737
|
+
ctx = outputCanvas.getContext("2d");
|
|
35738
|
+
if (!ctx) return null;
|
|
35739
|
+
const currentTime = this.getAnimationTime(),
|
|
35740
|
+
dynamicStrength = ImageProcessUtils.calculateDynamicStrength(this.colorConfig.strength, currentTime);
|
|
35741
|
+
let filterValue = "";
|
|
35742
|
+
return "grayscale" === this.colorConfig.effectType ? filterValue = `grayscale(${Math.min(1, dynamicStrength)})` : "sepia" === this.colorConfig.effectType && (filterValue = `sepia(${Math.min(1, dynamicStrength)})`), ctx.filter = filterValue, ctx.drawImage(canvas, 0, 0), ctx.filter = "none", outputCanvas;
|
|
35743
|
+
} catch (error) {
|
|
35744
|
+
return console.warn("CSS Filter API failed, falling back to pixel processing:", error), null;
|
|
35745
|
+
}
|
|
35746
|
+
}
|
|
35747
|
+
applyGrayscaleEffect(imageData, strength, time) {
|
|
35748
|
+
const {
|
|
35749
|
+
data: data,
|
|
35750
|
+
width: width,
|
|
35751
|
+
height: height
|
|
35752
|
+
} = imageData,
|
|
35753
|
+
result = new Uint8ClampedArray(data.length),
|
|
35754
|
+
dynamicStrength = ImageProcessUtils.calculateDynamicStrength(strength, time);
|
|
35755
|
+
for (let i = 0; i < data.length; i += 4) {
|
|
35756
|
+
const r = data[i],
|
|
35757
|
+
g = data[i + 1],
|
|
35758
|
+
b = data[i + 2],
|
|
35759
|
+
a = data[i + 3],
|
|
35760
|
+
gray = ImageProcessUtils.getLuminance(r, g, b);
|
|
35761
|
+
result[i] = Math.round(ImageProcessUtils.lerp(r, gray, dynamicStrength)), result[i + 1] = Math.round(ImageProcessUtils.lerp(g, gray, dynamicStrength)), result[i + 2] = Math.round(ImageProcessUtils.lerp(b, gray, dynamicStrength)), result[i + 3] = a;
|
|
35762
|
+
}
|
|
35763
|
+
return new ImageData(result, width, height);
|
|
35764
|
+
}
|
|
35765
|
+
applySepiaEffect(imageData, strength, time) {
|
|
35766
|
+
const {
|
|
35767
|
+
data: data,
|
|
35768
|
+
width: width,
|
|
35769
|
+
height: height
|
|
35770
|
+
} = imageData,
|
|
35771
|
+
result = new Uint8ClampedArray(data.length),
|
|
35772
|
+
dynamicStrength = ImageProcessUtils.calculateDynamicStrength(strength, time);
|
|
35773
|
+
for (let i = 0; i < data.length; i += 4) {
|
|
35774
|
+
const r = data[i],
|
|
35775
|
+
g = data[i + 1],
|
|
35776
|
+
b = data[i + 2],
|
|
35777
|
+
a = data[i + 3],
|
|
35778
|
+
[sepiaR, sepiaG, sepiaB] = ImageProcessUtils.applySepiaToPixel(r, g, b);
|
|
35779
|
+
result[i] = Math.round(ImageProcessUtils.lerp(r, sepiaR, dynamicStrength)), result[i + 1] = Math.round(ImageProcessUtils.lerp(g, sepiaG, dynamicStrength)), result[i + 2] = Math.round(ImageProcessUtils.lerp(b, sepiaB, dynamicStrength)), result[i + 3] = a;
|
|
35780
|
+
}
|
|
35781
|
+
return new ImageData(result, width, height);
|
|
35782
|
+
}
|
|
35783
|
+
afterStageRender(stage, canvas) {
|
|
35784
|
+
if (this.canUseCSSFilter() && this.colorConfig.strength > 0) {
|
|
35785
|
+
const cssResult = this.applyCSSFilter(canvas);
|
|
35786
|
+
if (cssResult) return cssResult;
|
|
35787
|
+
}
|
|
35788
|
+
return super.afterStageRender(stage, canvas);
|
|
35789
|
+
}
|
|
35790
|
+
}
|
|
35791
|
+
|
|
35792
|
+
class Distortion extends HybridEffectBase {
|
|
35793
|
+
constructor(from, to, duration, easing, params) {
|
|
35794
|
+
var _a, _b, _c;
|
|
35795
|
+
super(from, to, duration, easing, params), this.distortionConfig = {
|
|
35796
|
+
distortionType: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.distortionType) || "wave",
|
|
35797
|
+
strength: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.strength) || .3,
|
|
35798
|
+
useWebGL: void 0 === (null === (_c = null == params ? void 0 : params.options) || void 0 === _c ? void 0 : _c.useWebGL) || params.options.useWebGL
|
|
35799
|
+
};
|
|
35800
|
+
}
|
|
35801
|
+
getShaderSources() {
|
|
35802
|
+
return {
|
|
35803
|
+
vertex: "\n attribute vec2 a_position;\n attribute vec2 a_texCoord;\n varying vec2 v_texCoord;\n\n void main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n v_texCoord = a_texCoord;\n }\n ",
|
|
35804
|
+
fragment: "\n precision mediump float;\n uniform sampler2D u_texture;\n uniform float u_time;\n uniform float u_strength;\n uniform int u_distortionType;\n uniform vec2 u_resolution;\n varying vec2 v_texCoord;\n\n // 波浪扭曲函数\n vec2 wave(vec2 uv, float time, float strength) {\n float waveX = sin(uv.y * 10.0 + time * 3.0) * strength * 0.1;\n float waveY = sin(uv.x * 10.0 + time * 2.0) * strength * 0.1;\n return uv + vec2(waveX, waveY);\n }\n\n // 涟漪扭曲函数\n vec2 ripple(vec2 uv, float time, float strength) {\n vec2 center = vec2(0.5, 0.5);\n float distance = length(uv - center);\n float ripple = sin(distance * 20.0 - time * 5.0) * strength * 0.1;\n vec2 direction = normalize(uv - center);\n return uv + direction * ripple;\n }\n\n // 漩涡扭曲函数\n vec2 swirl(vec2 uv, float time, float strength) {\n vec2 center = vec2(0.5, 0.5);\n vec2 delta = uv - center;\n float dist = length(delta);\n float originalAngle = atan(delta.y, delta.x);\n float rotationAngle = dist * strength * time * 2.0;\n float finalAngle = originalAngle + rotationAngle;\n return center + dist * vec2(cos(finalAngle), sin(finalAngle));\n }\n\n void main() {\n vec2 uv = v_texCoord;\n\n // 根据扭曲类型应用相应变换\n if (u_distortionType == 0) {\n uv = wave(uv, u_time, u_strength);\n } else if (u_distortionType == 1) {\n uv = ripple(uv, u_time, u_strength);\n } else if (u_distortionType == 2) {\n uv = swirl(uv, u_time, u_strength);\n }\n\n // 边界检查\n if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);\n } else {\n gl_FragColor = texture2D(u_texture, uv);\n }\n }\n "
|
|
35805
|
+
};
|
|
35806
|
+
}
|
|
35807
|
+
applyWebGLEffect(canvas) {
|
|
35808
|
+
if (!this.gl || !this.program || !this.webglCanvas) return null;
|
|
35809
|
+
this.setupWebGLState(canvas);
|
|
35810
|
+
const texture = this.createTextureFromCanvas(canvas);
|
|
35811
|
+
if (!texture) return null;
|
|
35812
|
+
const vertexBuffer = this.createFullScreenQuad();
|
|
35813
|
+
if (!vertexBuffer) return this.gl.deleteTexture(texture), null;
|
|
35814
|
+
try {
|
|
35815
|
+
return this.gl.useProgram(this.program), this.setupVertexAttributes(), this.setDistortionUniforms(), this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4), this.webglCanvas;
|
|
35816
|
+
} finally {
|
|
35817
|
+
this.gl.deleteTexture(texture), this.gl.deleteBuffer(vertexBuffer);
|
|
35818
|
+
}
|
|
35819
|
+
}
|
|
35820
|
+
setDistortionUniforms() {
|
|
35821
|
+
if (!this.gl || !this.program) return;
|
|
35822
|
+
const currentTime = this.getAnimationTime(),
|
|
35823
|
+
timeLocation = this.gl.getUniformLocation(this.program, "u_time"),
|
|
35824
|
+
strengthLocation = this.gl.getUniformLocation(this.program, "u_strength"),
|
|
35825
|
+
distortionTypeLocation = this.gl.getUniformLocation(this.program, "u_distortionType"),
|
|
35826
|
+
resolutionLocation = this.gl.getUniformLocation(this.program, "u_resolution");
|
|
35827
|
+
this.gl.uniform1f(timeLocation, currentTime), this.gl.uniform1f(strengthLocation, this.distortionConfig.strength), this.gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height);
|
|
35828
|
+
this.gl.uniform1i(distortionTypeLocation, {
|
|
35829
|
+
wave: 0,
|
|
35830
|
+
ripple: 1,
|
|
35831
|
+
swirl: 2
|
|
35832
|
+
}[this.distortionConfig.distortionType] || 0);
|
|
35833
|
+
}
|
|
35834
|
+
applyCanvas2DEffect(canvas) {
|
|
35835
|
+
const outputCanvas = this.createOutputCanvas(canvas);
|
|
35836
|
+
if (!outputCanvas) return null;
|
|
35837
|
+
const {
|
|
35838
|
+
ctx: ctx
|
|
35839
|
+
} = outputCanvas;
|
|
35840
|
+
try {
|
|
35841
|
+
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
|
|
35842
|
+
currentTime = this.getAnimationTime();
|
|
35843
|
+
let distortedImageData;
|
|
35844
|
+
switch (this.distortionConfig.distortionType) {
|
|
35845
|
+
case "wave":
|
|
35846
|
+
distortedImageData = this.applyWaveDistortion(imageData, this.distortionConfig.strength, currentTime);
|
|
35847
|
+
break;
|
|
35848
|
+
case "ripple":
|
|
35849
|
+
distortedImageData = this.applyRippleDistortion(imageData, this.distortionConfig.strength, currentTime);
|
|
35850
|
+
break;
|
|
35851
|
+
case "swirl":
|
|
35852
|
+
distortedImageData = this.applySwirlDistortion(imageData, this.distortionConfig.strength, currentTime);
|
|
35853
|
+
break;
|
|
35854
|
+
default:
|
|
35855
|
+
distortedImageData = imageData;
|
|
35856
|
+
}
|
|
35857
|
+
return ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.putImageData(distortedImageData, 0, 0), outputCanvas.canvas;
|
|
35858
|
+
} catch (error) {
|
|
35859
|
+
return console.warn("Canvas 2D distortion effect failed:", error), null;
|
|
35860
|
+
}
|
|
35861
|
+
}
|
|
35862
|
+
applyWaveDistortion(imageData, strength, time) {
|
|
35863
|
+
const {
|
|
35864
|
+
data: data,
|
|
35865
|
+
width: width,
|
|
35866
|
+
height: height
|
|
35867
|
+
} = imageData,
|
|
35868
|
+
result = new Uint8ClampedArray(data.length);
|
|
35869
|
+
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
35870
|
+
const waveX = Math.sin(.1 * y + 3 * time) * strength * 20,
|
|
35871
|
+
waveY = Math.sin(.1 * x + 2 * time) * strength * 20,
|
|
35872
|
+
sourceX = Math.round(x - waveX),
|
|
35873
|
+
sourceY = Math.round(y - waveY),
|
|
35874
|
+
targetIndex = 4 * (y * width + x);
|
|
35875
|
+
if (sourceX >= 0 && sourceX < width && sourceY >= 0 && sourceY < height) {
|
|
35876
|
+
const sourceIndex = 4 * (sourceY * width + sourceX);
|
|
35877
|
+
result[targetIndex] = data[sourceIndex], result[targetIndex + 1] = data[sourceIndex + 1], result[targetIndex + 2] = data[sourceIndex + 2], result[targetIndex + 3] = data[sourceIndex + 3];
|
|
35878
|
+
} else result[targetIndex + 3] = 0;
|
|
35879
|
+
}
|
|
35880
|
+
return new ImageData(result, width, height);
|
|
35881
|
+
}
|
|
35882
|
+
applyRippleDistortion(imageData, strength, time) {
|
|
35883
|
+
const {
|
|
35884
|
+
data: data,
|
|
35885
|
+
width: width,
|
|
35886
|
+
height: height
|
|
35887
|
+
} = imageData,
|
|
35888
|
+
result = new Uint8ClampedArray(data.length),
|
|
35889
|
+
centerX = width / 2,
|
|
35890
|
+
centerY = height / 2;
|
|
35891
|
+
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
35892
|
+
const dx = x - centerX,
|
|
35893
|
+
dy = y - centerY,
|
|
35894
|
+
distance = Math.sqrt(dx * dx + dy * dy),
|
|
35895
|
+
ripple = Math.sin(.2 * distance - 5 * time) * strength * 10,
|
|
35896
|
+
angle = Math.atan2(dy, dx),
|
|
35897
|
+
sourceX = Math.round(x - Math.cos(angle) * ripple),
|
|
35898
|
+
sourceY = Math.round(y - Math.sin(angle) * ripple),
|
|
35899
|
+
targetIndex = 4 * (y * width + x);
|
|
35900
|
+
if (sourceX >= 0 && sourceX < width && sourceY >= 0 && sourceY < height) {
|
|
35901
|
+
const sourceIndex = 4 * (sourceY * width + sourceX);
|
|
35902
|
+
result[targetIndex] = data[sourceIndex], result[targetIndex + 1] = data[sourceIndex + 1], result[targetIndex + 2] = data[sourceIndex + 2], result[targetIndex + 3] = data[sourceIndex + 3];
|
|
35903
|
+
} else result[targetIndex + 3] = 0;
|
|
35904
|
+
}
|
|
35905
|
+
return new ImageData(result, width, height);
|
|
35906
|
+
}
|
|
35907
|
+
applySwirlDistortion(imageData, strength, time) {
|
|
35908
|
+
const {
|
|
35909
|
+
data: data,
|
|
35910
|
+
width: width,
|
|
35911
|
+
height: height
|
|
35912
|
+
} = imageData,
|
|
35913
|
+
result = new Uint8ClampedArray(data.length),
|
|
35914
|
+
centerX = width / 2,
|
|
35915
|
+
centerY = height / 2;
|
|
35916
|
+
for (let y = 0; y < height; y++) for (let x = 0; x < width; x++) {
|
|
35917
|
+
const dx = x - centerX,
|
|
35918
|
+
dy = y - centerY,
|
|
35919
|
+
distance = Math.sqrt(dx * dx + dy * dy),
|
|
35920
|
+
finalAngle = Math.atan2(dy, dx) + distance * strength * time * .02,
|
|
35921
|
+
sourceX = Math.round(centerX + distance * Math.cos(finalAngle)),
|
|
35922
|
+
sourceY = Math.round(centerY + distance * Math.sin(finalAngle)),
|
|
35923
|
+
targetIndex = 4 * (y * width + x);
|
|
35924
|
+
if (sourceX >= 0 && sourceX < width && sourceY >= 0 && sourceY < height) {
|
|
35925
|
+
const sourceIndex = 4 * (sourceY * width + sourceX);
|
|
35926
|
+
result[targetIndex] = data[sourceIndex], result[targetIndex + 1] = data[sourceIndex + 1], result[targetIndex + 2] = data[sourceIndex + 2], result[targetIndex + 3] = data[sourceIndex + 3];
|
|
35927
|
+
} else result[targetIndex + 3] = 0;
|
|
35928
|
+
}
|
|
35929
|
+
return new ImageData(result, width, height);
|
|
35930
|
+
}
|
|
35931
|
+
afterStageRender(stage, canvas) {
|
|
35932
|
+
return this.distortionConfig.strength <= 0 ? canvas : super.afterStageRender(stage, canvas);
|
|
35933
|
+
}
|
|
35934
|
+
}
|
|
35935
|
+
|
|
35936
|
+
class Particle extends HybridEffectBase {
|
|
35937
|
+
constructor(from, to, duration, easing, params) {
|
|
35938
|
+
var _a, _b, _c, _d;
|
|
35939
|
+
super(from, to, duration, easing, params), this.particles = [], this.positionBuffer = null, this.colorBuffer = null, this.particleConfig = {
|
|
35940
|
+
effectType: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.effectType) || "gravity",
|
|
35941
|
+
count: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.count) || 4e3,
|
|
35942
|
+
size: (null === (_c = null == params ? void 0 : params.options) || void 0 === _c ? void 0 : _c.size) || 20,
|
|
35943
|
+
strength: (null === (_d = null == params ? void 0 : params.options) || void 0 === _d ? void 0 : _d.strength) || 1.5
|
|
35944
|
+
};
|
|
35945
|
+
}
|
|
35946
|
+
getShaderSources() {
|
|
35947
|
+
return {
|
|
35948
|
+
vertex: "\n attribute vec2 a_position;\n attribute vec4 a_color;\n attribute float a_size;\n\n uniform vec2 u_resolution;\n uniform float u_time;\n uniform float u_forceStrength;\n uniform int u_effectType;\n\n varying vec4 v_color;\n\n void main() {\n // 将像素坐标转换为剪辑空间坐标\n vec2 clipSpace = ((a_position / u_resolution) * 2.0) - 1.0;\n clipSpace.y = -clipSpace.y; // 翻转Y轴\n\n gl_Position = vec4(clipSpace, 0.0, 1.0);\n gl_PointSize = a_size;\n v_color = a_color;\n }\n ",
|
|
35949
|
+
fragment: "\n precision mediump float;\n varying vec4 v_color;\n\n void main() {\n // 创建圆形粒子\n vec2 coord = gl_PointCoord - vec2(0.5);\n float distance = length(coord);\n\n if (distance > 0.5) {\n discard;\n }\n\n // 保持原始颜色,只调整透明度渐变\n gl_FragColor = vec4(v_color.rgb, v_color.a);\n }\n "
|
|
35950
|
+
};
|
|
35951
|
+
}
|
|
35952
|
+
applyWebGLEffect(canvas) {
|
|
35953
|
+
if (!this.gl || !this.program || !this.webglCanvas) return null;
|
|
35954
|
+
this.setupWebGLState(canvas), 0 === this.particles.length && this.extractParticles(canvas), this.updateParticles(canvas);
|
|
35955
|
+
const gl = this.gl;
|
|
35956
|
+
return gl.enable(gl.BLEND), gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA), gl.useProgram(this.program), this.prepareAndDrawParticles(gl), this.webglCanvas;
|
|
35957
|
+
}
|
|
35958
|
+
applyCanvas2DEffect(canvas) {
|
|
35959
|
+
const output = this.createOutputCanvas(canvas);
|
|
35960
|
+
if (!output) return null;
|
|
35961
|
+
const {
|
|
35962
|
+
canvas: outputCanvas,
|
|
35963
|
+
ctx: ctx
|
|
35964
|
+
} = output,
|
|
35965
|
+
progress = this.currentAnimationRatio;
|
|
35966
|
+
switch (this.particleConfig.effectType) {
|
|
35967
|
+
case "explode":
|
|
35968
|
+
this.applyCanvas2DExplode(ctx, canvas, progress);
|
|
35969
|
+
break;
|
|
35970
|
+
case "gravity":
|
|
35971
|
+
this.applyCanvas2DGravity(ctx, canvas, progress);
|
|
35972
|
+
break;
|
|
35973
|
+
case "vortex":
|
|
35974
|
+
this.applyCanvas2DVortex(ctx, canvas, progress);
|
|
35975
|
+
break;
|
|
35976
|
+
default:
|
|
35977
|
+
ctx.globalAlpha = Math.max(0, 1 - progress), ctx.drawImage(canvas, 0, 0);
|
|
35978
|
+
}
|
|
35979
|
+
return outputCanvas;
|
|
35980
|
+
}
|
|
35981
|
+
extractParticles(canvas) {
|
|
35982
|
+
const tempCanvas = ImageProcessUtils.createTempCanvas(canvas.width, canvas.height, 1),
|
|
35983
|
+
tempCtx = tempCanvas.getContext("2d");
|
|
35984
|
+
if (!tempCtx) return;
|
|
35985
|
+
tempCtx.drawImage(canvas, 0, 0, tempCanvas.width, tempCanvas.height);
|
|
35986
|
+
const data = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height).data;
|
|
35987
|
+
this.particles = [];
|
|
35988
|
+
const step = Math.max(1, Math.floor(Math.sqrt(tempCanvas.width * tempCanvas.height / (1.5 * this.particleConfig.count))));
|
|
35989
|
+
for (let y = 0; y < tempCanvas.height; y += step) for (let x = 0; x < tempCanvas.width; x += step) {
|
|
35990
|
+
const index = 4 * (y * tempCanvas.width + x),
|
|
35991
|
+
r = data[index],
|
|
35992
|
+
g = data[index + 1],
|
|
35993
|
+
b = data[index + 2],
|
|
35994
|
+
a = data[index + 3];
|
|
35995
|
+
if (a > 5) {
|
|
35996
|
+
const realX = x / tempCanvas.width * canvas.width,
|
|
35997
|
+
realY = y / tempCanvas.height * canvas.height,
|
|
35998
|
+
particle = {
|
|
35999
|
+
x: realX,
|
|
36000
|
+
y: realY,
|
|
36001
|
+
originX: realX,
|
|
36002
|
+
originY: realY,
|
|
36003
|
+
vx: 0,
|
|
36004
|
+
vy: 0,
|
|
36005
|
+
r: r / 255,
|
|
36006
|
+
g: g / 255,
|
|
36007
|
+
b: b / 255,
|
|
36008
|
+
a: Math.max(.6, a / 255),
|
|
36009
|
+
life: 1,
|
|
36010
|
+
size: this.particleConfig.size * (1 + .5 * Math.random())
|
|
36011
|
+
};
|
|
36012
|
+
this.particles.push(particle);
|
|
36013
|
+
}
|
|
36014
|
+
}
|
|
36015
|
+
}
|
|
36016
|
+
updateParticles(canvas) {
|
|
36017
|
+
const centerX = canvas.width / 2,
|
|
36018
|
+
centerY = canvas.height / 2,
|
|
36019
|
+
progress = this.currentAnimationRatio,
|
|
36020
|
+
duration = this.getDurationFromParent(),
|
|
36021
|
+
isShortAnimation = duration < 2e3,
|
|
36022
|
+
timeMultiplier = isShortAnimation ? Math.max(1.5, 3e3 / duration) : 1,
|
|
36023
|
+
intensityBoost = isShortAnimation ? Math.min(2, 2e3 / duration) : 1;
|
|
36024
|
+
this.particles.forEach(particle => {
|
|
36025
|
+
const dx = particle.x - centerX,
|
|
36026
|
+
dy = particle.y - centerY,
|
|
36027
|
+
distance = Math.sqrt(dx * dx + dy * dy),
|
|
36028
|
+
angle = Math.atan2(dy, dx);
|
|
36029
|
+
this.applyParticleForces(particle, angle, distance, progress, intensityBoost, canvas), this.updateParticleProperties(particle, progress, isShortAnimation, timeMultiplier, intensityBoost);
|
|
36030
|
+
});
|
|
36031
|
+
}
|
|
36032
|
+
applyParticleForces(particle, angle, distance, progress, intensityBoost, canvas) {
|
|
36033
|
+
const time = this.getAnimationTime();
|
|
36034
|
+
switch (this.particleConfig.effectType) {
|
|
36035
|
+
case "explode":
|
|
36036
|
+
const explodeIntensity = progress * this.particleConfig.strength * intensityBoost * 5;
|
|
36037
|
+
particle.vx += Math.cos(angle) * explodeIntensity, particle.vy += Math.sin(angle) * explodeIntensity;
|
|
36038
|
+
break;
|
|
36039
|
+
case "gravity":
|
|
36040
|
+
this.applyGravityEffect(particle, progress, intensityBoost, canvas, time);
|
|
36041
|
+
break;
|
|
36042
|
+
case "vortex":
|
|
36043
|
+
this.applyVortexEffect(particle, progress, intensityBoost, canvas, angle, distance);
|
|
36044
|
+
}
|
|
36045
|
+
}
|
|
36046
|
+
applyGravityEffect(particle, progress, intensityBoost, canvas, time) {
|
|
36047
|
+
const gravityThreshold = (particle.originX + .7 * particle.originY) / (canvas.width + canvas.height) * .8;
|
|
36048
|
+
if (progress > gravityThreshold) {
|
|
36049
|
+
const gravityProgress = (progress - gravityThreshold) / (1 - gravityThreshold),
|
|
36050
|
+
gravityForce = this.particleConfig.strength * gravityProgress * gravityProgress * 12 * intensityBoost;
|
|
36051
|
+
particle.vy += gravityForce;
|
|
36052
|
+
const turbulence = Math.sin(3 * time + .02 * particle.originX) * Math.cos(2 * time + .015 * particle.originY);
|
|
36053
|
+
particle.vx += turbulence * this.particleConfig.strength * 2 * intensityBoost;
|
|
36054
|
+
}
|
|
36055
|
+
}
|
|
36056
|
+
applyVortexEffect(particle, progress, intensityBoost, canvas, angle, distance) {
|
|
36057
|
+
const centerX = canvas.width / 2,
|
|
36058
|
+
centerY = canvas.height / 2,
|
|
36059
|
+
spiralAngle = angle + progress * Math.PI * .8,
|
|
36060
|
+
targetRadius = distance + progress * Math.max(canvas.width, canvas.height) * .7 * 1.8,
|
|
36061
|
+
targetX = centerX + Math.cos(spiralAngle) * targetRadius,
|
|
36062
|
+
targetY = centerY + Math.sin(spiralAngle) * targetRadius,
|
|
36063
|
+
baseForce = progress * this.particleConfig.strength * .08 * intensityBoost;
|
|
36064
|
+
particle.vx += (targetX - particle.x) * baseForce, particle.vy += (targetY - particle.y) * baseForce;
|
|
36065
|
+
}
|
|
36066
|
+
updateParticleProperties(particle, progress, isShortAnimation, timeMultiplier, intensityBoost) {
|
|
36067
|
+
const dragCoeff = isShortAnimation ? .99 : .98;
|
|
36068
|
+
if (particle.vx *= dragCoeff, particle.vy *= dragCoeff, particle.x += particle.vx, particle.y += particle.vy, isShortAnimation) {
|
|
36069
|
+
const lifeDecayRate = Math.max(.1, .5 / timeMultiplier);
|
|
36070
|
+
particle.life = Math.max(0, 1 - progress * lifeDecayRate), particle.a = Math.max(.2, particle.life * Math.min(1, 1.2 * particle.a)), particle.size = Math.max(.7 * this.particleConfig.size, this.particleConfig.size * (.5 + .5 * particle.life));
|
|
36071
|
+
} else particle.life = Math.max(0, 1 - .2 * progress), particle.a = Math.max(.1, particle.life * Math.min(1, 1.5 * particle.a)), particle.size = Math.max(.5 * this.particleConfig.size, this.particleConfig.size * (.3 + .7 * particle.life));
|
|
36072
|
+
}
|
|
36073
|
+
prepareAndDrawParticles(gl) {
|
|
36074
|
+
const positions = new Float32Array(2 * this.particles.length),
|
|
36075
|
+
colors = new Float32Array(4 * this.particles.length),
|
|
36076
|
+
sizes = new Float32Array(this.particles.length);
|
|
36077
|
+
this.particles.forEach((particle, i) => {
|
|
36078
|
+
positions[2 * i] = particle.x, positions[2 * i + 1] = particle.y, colors[4 * i] = particle.r, colors[4 * i + 1] = particle.g, colors[4 * i + 2] = particle.b, colors[4 * i + 3] = Math.max(.1, particle.a), sizes[i] = Math.max(6, 1.5 * particle.size);
|
|
36079
|
+
}), this.updateParticleBuffers(gl, positions, colors, sizes), this.setParticleUniforms(gl), gl.drawArrays(gl.POINTS, 0, this.particles.length), this.cleanupTempBuffers(gl);
|
|
36080
|
+
}
|
|
36081
|
+
updateParticleBuffers(gl, positions, colors, sizes) {
|
|
36082
|
+
this.positionBuffer || (this.positionBuffer = gl.createBuffer()), gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer), gl.bufferData(gl.ARRAY_BUFFER, positions, gl.DYNAMIC_DRAW);
|
|
36083
|
+
const positionLocation = gl.getAttribLocation(this.program, "a_position");
|
|
36084
|
+
gl.enableVertexAttribArray(positionLocation), gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, !1, 0, 0), this.colorBuffer || (this.colorBuffer = gl.createBuffer()), gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer), gl.bufferData(gl.ARRAY_BUFFER, colors, gl.DYNAMIC_DRAW);
|
|
36085
|
+
const colorLocation = gl.getAttribLocation(this.program, "a_color");
|
|
36086
|
+
gl.enableVertexAttribArray(colorLocation), gl.vertexAttribPointer(colorLocation, 4, gl.FLOAT, !1, 0, 0);
|
|
36087
|
+
const sizeBuffer = gl.createBuffer();
|
|
36088
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer), gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.DYNAMIC_DRAW);
|
|
36089
|
+
const sizeLocation = gl.getAttribLocation(this.program, "a_size");
|
|
36090
|
+
gl.enableVertexAttribArray(sizeLocation), gl.vertexAttribPointer(sizeLocation, 1, gl.FLOAT, !1, 0, 0), this._tempSizeBuffer = sizeBuffer;
|
|
36091
|
+
}
|
|
36092
|
+
setParticleUniforms(gl) {
|
|
36093
|
+
const resolutionLocation = gl.getUniformLocation(this.program, "u_resolution"),
|
|
36094
|
+
timeLocation = gl.getUniformLocation(this.program, "u_time"),
|
|
36095
|
+
forceStrengthLocation = gl.getUniformLocation(this.program, "u_forceStrength"),
|
|
36096
|
+
effectTypeLocation = gl.getUniformLocation(this.program, "u_effectType");
|
|
36097
|
+
gl.uniform2f(resolutionLocation, this.webglCanvas.width, this.webglCanvas.height), gl.uniform1f(timeLocation, this.getAnimationTime()), gl.uniform1f(forceStrengthLocation, this.particleConfig.strength);
|
|
36098
|
+
gl.uniform1i(effectTypeLocation, {
|
|
36099
|
+
explode: 0,
|
|
36100
|
+
vortex: 1,
|
|
36101
|
+
gravity: 2
|
|
36102
|
+
}[this.particleConfig.effectType] || 0);
|
|
36103
|
+
}
|
|
36104
|
+
cleanupTempBuffers(gl) {
|
|
36105
|
+
const tempSizeBuffer = this._tempSizeBuffer;
|
|
36106
|
+
tempSizeBuffer && (gl.deleteBuffer(tempSizeBuffer), delete this._tempSizeBuffer);
|
|
36107
|
+
}
|
|
36108
|
+
applyCanvas2DExplode(ctx, canvas, progress) {
|
|
36109
|
+
const centerX = canvas.width / 2,
|
|
36110
|
+
centerY = canvas.height / 2;
|
|
36111
|
+
ctx.save(), ctx.globalAlpha = Math.max(0, 1 - progress), ctx.translate(centerX, centerY);
|
|
36112
|
+
const scale = 1 + .5 * progress;
|
|
36113
|
+
ctx.scale(scale, scale), ctx.translate(-centerX, -centerY), ctx.drawImage(canvas, 0, 0), ctx.restore();
|
|
36114
|
+
}
|
|
36115
|
+
applyCanvas2DGravity(ctx, canvas, progress) {
|
|
36116
|
+
ctx.save(), ctx.globalAlpha = Math.max(0, 1 - progress);
|
|
36117
|
+
const offsetY = progress * canvas.height * .3;
|
|
36118
|
+
ctx.drawImage(canvas, 0, offsetY), ctx.restore();
|
|
36119
|
+
}
|
|
36120
|
+
applyCanvas2DVortex(ctx, canvas, progress) {
|
|
36121
|
+
const centerX = canvas.width / 2,
|
|
36122
|
+
centerY = canvas.height / 2;
|
|
36123
|
+
ctx.save(), ctx.globalAlpha = Math.max(0, 1 - progress), ctx.translate(centerX, centerY), ctx.rotate(progress * Math.PI * 2), ctx.translate(-centerX, -centerY), ctx.drawImage(canvas, 0, 0), ctx.restore();
|
|
36124
|
+
}
|
|
36125
|
+
}
|
|
36126
|
+
|
|
36127
|
+
class Glitch extends Canvas2DEffectBase {
|
|
36128
|
+
constructor(from, to, duration, easing, params) {
|
|
36129
|
+
var _a, _b;
|
|
36130
|
+
super(from, to, duration, easing, params), this.glitchConfig = {
|
|
36131
|
+
effectType: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.effectType) || "rgb-shift",
|
|
36132
|
+
intensity: void 0 !== (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.intensity) ? params.options.intensity : .5
|
|
36133
|
+
};
|
|
36134
|
+
}
|
|
36135
|
+
applyCanvas2DEffect(canvas) {
|
|
36136
|
+
if (this.glitchConfig.intensity <= 0) {
|
|
36137
|
+
const outputCanvas = this.createOutputCanvas(canvas);
|
|
36138
|
+
return outputCanvas ? outputCanvas.canvas : null;
|
|
36139
|
+
}
|
|
36140
|
+
try {
|
|
36141
|
+
switch (this.glitchConfig.effectType) {
|
|
36142
|
+
case "rgb-shift":
|
|
36143
|
+
default:
|
|
36144
|
+
return this.applyRGBShiftGlitch(canvas);
|
|
36145
|
+
case "digital-distortion":
|
|
36146
|
+
return this.applyDigitalDistortionGlitch(canvas);
|
|
36147
|
+
case "scan-lines":
|
|
36148
|
+
return this.applyScanLineGlitch(canvas);
|
|
36149
|
+
case "data-corruption":
|
|
36150
|
+
return this.applyDataCorruptionGlitch(canvas);
|
|
36151
|
+
}
|
|
36152
|
+
} catch (error) {
|
|
36153
|
+
return console.warn("Glitch effect failed:", error), null;
|
|
36154
|
+
}
|
|
36155
|
+
}
|
|
36156
|
+
applyRGBShiftGlitch(canvas) {
|
|
36157
|
+
const outputCanvas = this.createOutputCanvas(canvas);
|
|
36158
|
+
if (!outputCanvas) return null;
|
|
36159
|
+
const {
|
|
36160
|
+
ctx: ctx
|
|
36161
|
+
} = outputCanvas;
|
|
36162
|
+
try {
|
|
36163
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
36164
|
+
const dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime()),
|
|
36165
|
+
maxOffset = Math.floor(20 * dynamicIntensity),
|
|
36166
|
+
redOffset = this.generateRandomOffset(maxOffset),
|
|
36167
|
+
greenOffset = this.generateRandomOffset(maxOffset, .3),
|
|
36168
|
+
blueOffset = this.generateRandomOffset(-maxOffset),
|
|
36169
|
+
tempCanvas = ImageProcessUtils.createTempCanvas(canvas.width, canvas.height),
|
|
36170
|
+
tempCtx = tempCanvas.getContext("2d");
|
|
36171
|
+
tempCtx.drawImage(canvas, 0, 0);
|
|
36172
|
+
const originalImageData = tempCtx.getImageData(0, 0, canvas.width, canvas.height),
|
|
36173
|
+
redChannelData = ImageProcessUtils.extractChannel(originalImageData, 0),
|
|
36174
|
+
greenChannelData = ImageProcessUtils.extractChannel(originalImageData, 1),
|
|
36175
|
+
blueChannelData = ImageProcessUtils.extractChannel(originalImageData, 2);
|
|
36176
|
+
return ctx.globalCompositeOperation = "screen", tempCtx.clearRect(0, 0, canvas.width, canvas.height), tempCtx.putImageData(redChannelData, 0, 0), ctx.drawImage(tempCanvas, redOffset.x, redOffset.y), tempCtx.clearRect(0, 0, canvas.width, canvas.height), tempCtx.putImageData(greenChannelData, 0, 0), ctx.drawImage(tempCanvas, greenOffset.x, greenOffset.y), tempCtx.clearRect(0, 0, canvas.width, canvas.height), tempCtx.putImageData(blueChannelData, 0, 0), ctx.drawImage(tempCanvas, blueOffset.x, blueOffset.y), ctx.globalCompositeOperation = "source-over", outputCanvas.canvas;
|
|
36177
|
+
} catch (error) {
|
|
36178
|
+
return console.warn("RGB shift glitch failed:", error), null;
|
|
36179
|
+
}
|
|
36180
|
+
}
|
|
36181
|
+
applyDigitalDistortionGlitch(canvas) {
|
|
36182
|
+
const outputCanvas = this.createOutputCanvas(canvas);
|
|
36183
|
+
if (!outputCanvas) return null;
|
|
36184
|
+
const {
|
|
36185
|
+
ctx: ctx
|
|
36186
|
+
} = outputCanvas;
|
|
36187
|
+
try {
|
|
36188
|
+
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
|
|
36189
|
+
dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime()),
|
|
36190
|
+
distortedImageData = this.processDigitalDistortion(imageData, dynamicIntensity);
|
|
36191
|
+
return ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.putImageData(distortedImageData, 0, 0), outputCanvas.canvas;
|
|
36192
|
+
} catch (error) {
|
|
36193
|
+
return console.warn("Digital distortion glitch failed:", error), null;
|
|
36194
|
+
}
|
|
36195
|
+
}
|
|
36196
|
+
applyScanLineGlitch(canvas) {
|
|
36197
|
+
const outputCanvas = this.createOutputCanvas(canvas);
|
|
36198
|
+
if (!outputCanvas) return null;
|
|
36199
|
+
const {
|
|
36200
|
+
ctx: ctx
|
|
36201
|
+
} = outputCanvas;
|
|
36202
|
+
try {
|
|
36203
|
+
const dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime()),
|
|
36204
|
+
lineSpacing = Math.max(2, Math.floor(10 - 8 * dynamicIntensity));
|
|
36205
|
+
ctx.globalCompositeOperation = "multiply";
|
|
36206
|
+
for (let y = 0; y < canvas.height; y += lineSpacing) if (Math.random() < dynamicIntensity) {
|
|
36207
|
+
const opacity = .1 + .4 * dynamicIntensity;
|
|
36208
|
+
ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`, ctx.fillRect(0, y, canvas.width, 1);
|
|
36209
|
+
}
|
|
36210
|
+
ctx.globalCompositeOperation = "screen";
|
|
36211
|
+
const brightLineCount = Math.floor(20 * dynamicIntensity);
|
|
36212
|
+
for (let i = 0; i < brightLineCount; i++) {
|
|
36213
|
+
const y = Math.random() * canvas.height,
|
|
36214
|
+
opacity = .3 * dynamicIntensity;
|
|
36215
|
+
ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`, ctx.fillRect(0, Math.floor(y), canvas.width, 1);
|
|
36216
|
+
}
|
|
36217
|
+
return ctx.globalCompositeOperation = "source-over", outputCanvas.canvas;
|
|
36218
|
+
} catch (error) {
|
|
36219
|
+
return console.warn("Scan line glitch failed:", error), null;
|
|
36220
|
+
}
|
|
36221
|
+
}
|
|
36222
|
+
applyDataCorruptionGlitch(canvas) {
|
|
36223
|
+
const outputCanvas = this.createOutputCanvas(canvas);
|
|
36224
|
+
if (!outputCanvas) return null;
|
|
36225
|
+
const {
|
|
36226
|
+
ctx: ctx
|
|
36227
|
+
} = outputCanvas;
|
|
36228
|
+
try {
|
|
36229
|
+
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
|
|
36230
|
+
dynamicIntensity = ImageProcessUtils.calculateDynamicStrength(this.glitchConfig.intensity, this.getAnimationTime()),
|
|
36231
|
+
corruptedImageData = this.processDataCorruption(imageData, dynamicIntensity);
|
|
36232
|
+
return ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.putImageData(corruptedImageData, 0, 0), outputCanvas.canvas;
|
|
36233
|
+
} catch (error) {
|
|
36234
|
+
return console.warn("Data corruption glitch failed:", error), null;
|
|
36235
|
+
}
|
|
36236
|
+
}
|
|
36237
|
+
generateRandomOffset(maxOffset, scale = 1) {
|
|
36238
|
+
return {
|
|
36239
|
+
x: (Math.random() - .5) * maxOffset,
|
|
36240
|
+
y: (Math.random() - .5) * maxOffset * scale
|
|
36241
|
+
};
|
|
36242
|
+
}
|
|
36243
|
+
processDigitalDistortion(imageData, intensity) {
|
|
36244
|
+
const {
|
|
36245
|
+
data: data,
|
|
36246
|
+
width: width,
|
|
36247
|
+
height: height
|
|
36248
|
+
} = imageData,
|
|
36249
|
+
result = new Uint8ClampedArray(data),
|
|
36250
|
+
sliceCount = Math.floor(20 * intensity) + 5,
|
|
36251
|
+
sliceHeight = Math.floor(height / sliceCount);
|
|
36252
|
+
for (let i = 0; i < sliceCount; i++) if (Math.random() < intensity) {
|
|
36253
|
+
const y = i * sliceHeight,
|
|
36254
|
+
sliceEnd = Math.min(y + sliceHeight, height),
|
|
36255
|
+
offset = Math.floor((Math.random() - .5) * width * intensity * .1);
|
|
36256
|
+
this.shiftSliceHorizontal(result, width, height, y, sliceEnd, offset);
|
|
36257
|
+
}
|
|
36258
|
+
const noiseIntensity = .3 * intensity;
|
|
36259
|
+
for (let i = 0; i < data.length; i += 4) Math.random() < noiseIntensity && (result[i] = 255 * Math.random(), result[i + 1] = 255 * Math.random(), result[i + 2] = 255 * Math.random());
|
|
36260
|
+
return new ImageData(result, width, height);
|
|
36261
|
+
}
|
|
36262
|
+
shiftSliceHorizontal(data, width, height, startY, endY, offset) {
|
|
36263
|
+
const tempRow = new Uint8ClampedArray(4 * width);
|
|
36264
|
+
for (let y = startY; y < endY; y++) {
|
|
36265
|
+
const rowStart = y * width * 4;
|
|
36266
|
+
for (let x = 0; x < 4 * width; x++) tempRow[x] = data[rowStart + x];
|
|
36267
|
+
for (let x = 0; x < width; x++) {
|
|
36268
|
+
const targetIndex = rowStart + 4 * x,
|
|
36269
|
+
sourceIndex = 4 * ((x - offset + width) % width);
|
|
36270
|
+
data[targetIndex] = tempRow[sourceIndex], data[targetIndex + 1] = tempRow[sourceIndex + 1], data[targetIndex + 2] = tempRow[sourceIndex + 2], data[targetIndex + 3] = tempRow[sourceIndex + 3];
|
|
36271
|
+
}
|
|
36272
|
+
}
|
|
36273
|
+
}
|
|
36274
|
+
processDataCorruption(imageData, intensity) {
|
|
36275
|
+
const {
|
|
36276
|
+
data: data,
|
|
36277
|
+
width: width,
|
|
36278
|
+
height: height
|
|
36279
|
+
} = imageData,
|
|
36280
|
+
result = new Uint8ClampedArray(data),
|
|
36281
|
+
stripeCount = Math.floor(15 * intensity) + 5;
|
|
36282
|
+
for (let i = 0; i < stripeCount; i++) if (Math.random() < intensity) {
|
|
36283
|
+
const x = Math.floor(Math.random() * width),
|
|
36284
|
+
stripeWidth = Math.floor(5 * Math.random()) + 1,
|
|
36285
|
+
color = Math.random() < .5 ? 0 : 255;
|
|
36286
|
+
for (let y = 0; y < height; y++) for (let dx = 0; dx < stripeWidth && x + dx < width; dx++) {
|
|
36287
|
+
const index = 4 * (y * width + x + dx);
|
|
36288
|
+
result[index] = color, result[index + 1] = color, result[index + 2] = color;
|
|
36289
|
+
}
|
|
36290
|
+
}
|
|
36291
|
+
const corruptionCount = Math.floor(20 * intensity);
|
|
36292
|
+
for (let i = 0; i < corruptionCount; i++) {
|
|
36293
|
+
const blockX = Math.floor(Math.random() * width),
|
|
36294
|
+
blockY = Math.floor(Math.random() * height),
|
|
36295
|
+
blockW = Math.floor(20 * Math.random()) + 5,
|
|
36296
|
+
blockH = Math.floor(10 * Math.random()) + 2;
|
|
36297
|
+
this.corruptBlock(result, width, height, blockX, blockY, blockW, blockH);
|
|
36298
|
+
}
|
|
36299
|
+
return new ImageData(result, width, height);
|
|
36300
|
+
}
|
|
36301
|
+
corruptBlock(data, width, height, x, y, w, h) {
|
|
36302
|
+
for (let dy = 0; dy < h && y + dy < height; dy++) for (let dx = 0; dx < w && x + dx < width; dx++) {
|
|
36303
|
+
const index = 4 * ((y + dy) * width + (x + dx));
|
|
36304
|
+
Math.random() < .7 && (data[index] = 255 * Math.random(), data[index + 1] = 255 * Math.random(), data[index + 2] = 255 * Math.random());
|
|
36305
|
+
}
|
|
36306
|
+
}
|
|
36307
|
+
}
|
|
36308
|
+
|
|
36309
|
+
class GaussianBlur extends AStageAnimate {
|
|
36310
|
+
constructor(from, to, duration, easing, params) {
|
|
36311
|
+
var _a, _b;
|
|
36312
|
+
super(from, to, duration, easing, params), this.blurConfig = {
|
|
36313
|
+
blurRadius: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.blurRadius) || 8,
|
|
36314
|
+
useOptimizedBlur: void 0 === (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.useOptimizedBlur) || params.options.useOptimizedBlur
|
|
36315
|
+
};
|
|
36316
|
+
}
|
|
36317
|
+
applyCSSBlur(canvas, radius) {
|
|
36318
|
+
const c = vglobal.createCanvas({
|
|
36319
|
+
width: canvas.width,
|
|
36320
|
+
height: canvas.height,
|
|
36321
|
+
dpr: vglobal.devicePixelRatio
|
|
36322
|
+
}),
|
|
36323
|
+
ctx = c.getContext("2d");
|
|
36324
|
+
return ctx ? (ctx.filter = `blur(${radius}px)`, ctx.drawImage(canvas, 0, 0), ctx.filter = "none", c) : canvas;
|
|
36325
|
+
}
|
|
36326
|
+
applyDownsampleBlur(imageData, radius) {
|
|
36327
|
+
const {
|
|
36328
|
+
width: width,
|
|
36329
|
+
height: height
|
|
36330
|
+
} = imageData,
|
|
36331
|
+
downsample = Math.max(1, Math.floor(radius / 2)),
|
|
36332
|
+
smallWidth = Math.floor(width / downsample),
|
|
36333
|
+
smallHeight = Math.floor(height / downsample),
|
|
36334
|
+
tempCanvas = vglobal.createCanvas({
|
|
36335
|
+
width: smallWidth,
|
|
36336
|
+
height: smallHeight,
|
|
36337
|
+
dpr: 1
|
|
36338
|
+
}),
|
|
36339
|
+
tempCtx = tempCanvas.getContext("2d");
|
|
36340
|
+
if (!tempCtx) return imageData;
|
|
36341
|
+
const originalCanvas = vglobal.createCanvas({
|
|
36342
|
+
width: width,
|
|
36343
|
+
height: height,
|
|
36344
|
+
dpr: 1
|
|
36345
|
+
}),
|
|
36346
|
+
originalCtx = originalCanvas.getContext("2d");
|
|
36347
|
+
return originalCtx ? (originalCtx.putImageData(imageData, 0, 0), tempCtx.drawImage(originalCanvas, 0, 0, smallWidth, smallHeight), tempCtx.filter = `blur(${radius / downsample}px)`, tempCtx.drawImage(tempCanvas, 0, 0), tempCtx.filter = "none", originalCtx.clearRect(0, 0, width, height), originalCtx.drawImage(tempCanvas, 0, 0, width, height), originalCtx.getImageData(0, 0, width, height)) : imageData;
|
|
36348
|
+
}
|
|
36349
|
+
afterStageRender(stage, canvas) {
|
|
36350
|
+
if (this.blurConfig.blurRadius <= 0) return canvas;
|
|
36351
|
+
let result;
|
|
36352
|
+
if (this.blurConfig.useOptimizedBlur) result = this.applyCSSBlur(canvas, this.blurConfig.blurRadius);else {
|
|
36353
|
+
const c = vglobal.createCanvas({
|
|
36354
|
+
width: canvas.width,
|
|
36355
|
+
height: canvas.height,
|
|
36356
|
+
dpr: vglobal.devicePixelRatio
|
|
36357
|
+
}),
|
|
36358
|
+
ctx = c.getContext("2d");
|
|
36359
|
+
if (!ctx) return !1;
|
|
36360
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height), ctx.drawImage(canvas, 0, 0);
|
|
36361
|
+
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
|
|
36362
|
+
blurredImageData = this.applyDownsampleBlur(imageData, this.blurConfig.blurRadius);
|
|
36363
|
+
ctx.putImageData(blurredImageData, 0, 0), result = c;
|
|
36364
|
+
}
|
|
36365
|
+
const ctx = result.getContext("2d");
|
|
36366
|
+
return ctx && (ctx.globalCompositeOperation = "overlay", ctx.fillStyle = "rgba(255, 255, 255, 0.1)", ctx.fillRect(0, 0, result.width, result.height), ctx.globalCompositeOperation = "source-over"), result;
|
|
36367
|
+
}
|
|
36368
|
+
}
|
|
36369
|
+
|
|
36370
|
+
class Pixelation extends DisappearAnimateBase {
|
|
36371
|
+
constructor(from, to, duration, easing, params) {
|
|
36372
|
+
var _a, _b;
|
|
36373
|
+
super(from, to, duration, easing, params), this.pixelationConfig = {
|
|
36374
|
+
maxPixelSize: (null === (_a = null == params ? void 0 : params.options) || void 0 === _a ? void 0 : _a.maxPixelSize) || 20,
|
|
36375
|
+
method: (null === (_b = null == params ? void 0 : params.options) || void 0 === _b ? void 0 : _b.method) || "out"
|
|
36376
|
+
};
|
|
36377
|
+
}
|
|
36378
|
+
applyDownsamplePixelation(canvas, pixelSize) {
|
|
36379
|
+
if (pixelSize <= 1) return canvas;
|
|
36380
|
+
const {
|
|
36381
|
+
width: width,
|
|
36382
|
+
height: height
|
|
36383
|
+
} = canvas,
|
|
36384
|
+
smallWidth = Math.ceil(width / pixelSize),
|
|
36385
|
+
smallHeight = Math.ceil(height / pixelSize),
|
|
36386
|
+
smallCanvas = vglobal.createCanvas({
|
|
36387
|
+
width: smallWidth,
|
|
36388
|
+
height: smallHeight,
|
|
36389
|
+
dpr: 1
|
|
36390
|
+
}),
|
|
36391
|
+
smallCtx = smallCanvas.getContext("2d");
|
|
36392
|
+
if (!smallCtx) return canvas;
|
|
36393
|
+
const outputCanvas = vglobal.createCanvas({
|
|
36394
|
+
width: width,
|
|
36395
|
+
height: height,
|
|
36396
|
+
dpr: vglobal.devicePixelRatio
|
|
36397
|
+
}),
|
|
36398
|
+
outputCtx = outputCanvas.getContext("2d");
|
|
36399
|
+
return outputCtx ? (smallCtx.imageSmoothingEnabled = !1, outputCtx.imageSmoothingEnabled = !1, smallCtx.drawImage(canvas, 0, 0, smallWidth, smallHeight), outputCtx.drawImage(smallCanvas, 0, 0, width, height), outputCanvas) : canvas;
|
|
36400
|
+
}
|
|
36401
|
+
updateAnimationProgress() {
|
|
36402
|
+
if ("in" === this.pixelationConfig.method) {
|
|
36403
|
+
return this.pixelationConfig.maxPixelSize - this.currentAnimationRatio * (this.pixelationConfig.maxPixelSize - 1);
|
|
36404
|
+
}
|
|
36405
|
+
return 1 + this.currentAnimationRatio * (this.pixelationConfig.maxPixelSize - 1);
|
|
36406
|
+
}
|
|
36407
|
+
afterStageRender(stage, canvas) {
|
|
36408
|
+
const currentPixelSize = this.updateAnimationProgress();
|
|
36409
|
+
if (currentPixelSize <= 1) return canvas;
|
|
36410
|
+
return this.applyDownsamplePixelation(canvas, currentPixelSize);
|
|
36411
|
+
}
|
|
36412
|
+
}
|
|
36413
|
+
|
|
35146
36414
|
const registerCustomAnimate = () => {
|
|
35147
|
-
AnimateExecutor.registerBuiltInAnimate("increaseCount", IncreaseCount), AnimateExecutor.registerBuiltInAnimate("fromTo", FromTo), AnimateExecutor.registerBuiltInAnimate("scaleIn", ScaleIn), AnimateExecutor.registerBuiltInAnimate("scaleOut", ScaleOut), AnimateExecutor.registerBuiltInAnimate("growHeightIn", GrowHeightIn), AnimateExecutor.registerBuiltInAnimate("growHeightOut", GrowHeightOut), AnimateExecutor.registerBuiltInAnimate("growWidthIn", GrowWidthIn), AnimateExecutor.registerBuiltInAnimate("growWidthOut", GrowWidthOut), AnimateExecutor.registerBuiltInAnimate("growCenterIn", GrowCenterIn), AnimateExecutor.registerBuiltInAnimate("growCenterOut", GrowCenterOut), AnimateExecutor.registerBuiltInAnimate("clipIn", ClipIn), AnimateExecutor.registerBuiltInAnimate("clipOut", ClipOut), AnimateExecutor.registerBuiltInAnimate("fadeIn", FadeIn), AnimateExecutor.registerBuiltInAnimate("fadeOut", FadeOut), AnimateExecutor.registerBuiltInAnimate("growPointsIn", GrowPointsIn), AnimateExecutor.registerBuiltInAnimate("growPointsOut", GrowPointsOut), AnimateExecutor.registerBuiltInAnimate("growPointsXIn", GrowPointsXIn), AnimateExecutor.registerBuiltInAnimate("growPointsXOut", GrowPointsXOut), AnimateExecutor.registerBuiltInAnimate("growPointsYIn", GrowPointsYIn), AnimateExecutor.registerBuiltInAnimate("growPointsYOut", GrowPointsYOut), AnimateExecutor.registerBuiltInAnimate("growAngleIn", GrowAngleIn), AnimateExecutor.registerBuiltInAnimate("growAngleOut", GrowAngleOut), AnimateExecutor.registerBuiltInAnimate("growRadiusIn", GrowRadiusIn), AnimateExecutor.registerBuiltInAnimate("growRadiusOut", GrowRadiusOut), AnimateExecutor.registerBuiltInAnimate("moveIn", MoveIn), AnimateExecutor.registerBuiltInAnimate("moveOut", MoveOut), AnimateExecutor.registerBuiltInAnimate("rotateIn", RotateIn), AnimateExecutor.registerBuiltInAnimate("rotateOut", RotateOut), AnimateExecutor.registerBuiltInAnimate("update", Update), AnimateExecutor.registerBuiltInAnimate("state", State), AnimateExecutor.registerBuiltInAnimate("labelItemAppear", LabelItemAppear), AnimateExecutor.registerBuiltInAnimate("labelItemDisappear", LabelItemDisappear), AnimateExecutor.registerBuiltInAnimate("poptipAppear", PoptipAppear), AnimateExecutor.registerBuiltInAnimate("poptipDisappear", PoptipDisappear), AnimateExecutor.registerBuiltInAnimate("inputText", InputText), AnimateExecutor.registerBuiltInAnimate("inputRichText", InputRichText), AnimateExecutor.registerBuiltInAnimate("outputRichText", OutputRichText), AnimateExecutor.registerBuiltInAnimate("slideRichText", SlideRichText), AnimateExecutor.registerBuiltInAnimate("slideOutRichText", SlideOutRichText), AnimateExecutor.registerBuiltInAnimate("slideIn", SlideIn), AnimateExecutor.registerBuiltInAnimate("growIn", GrowIn), AnimateExecutor.registerBuiltInAnimate("spinIn", SpinIn), AnimateExecutor.registerBuiltInAnimate("moveScaleIn", MoveScaleIn), AnimateExecutor.registerBuiltInAnimate("moveRotateIn", MoveRotateIn), AnimateExecutor.registerBuiltInAnimate("strokeIn", StrokeIn), AnimateExecutor.registerBuiltInAnimate("slideOut", SlideOut), AnimateExecutor.registerBuiltInAnimate("growOut", GrowOut), AnimateExecutor.registerBuiltInAnimate("spinOut", SpinOut), AnimateExecutor.registerBuiltInAnimate("moveScaleOut", MoveScaleOut), AnimateExecutor.registerBuiltInAnimate("moveRotateOut", MoveRotateOut), AnimateExecutor.registerBuiltInAnimate("strokeOut", StrokeOut), AnimateExecutor.registerBuiltInAnimate("pulse", PulseAnimate), AnimateExecutor.registerBuiltInAnimate("MotionPath", MotionPath), AnimateExecutor.registerBuiltInAnimate("streamLight", StreamLight);
|
|
36415
|
+
AnimateExecutor.registerBuiltInAnimate("increaseCount", IncreaseCount), AnimateExecutor.registerBuiltInAnimate("fromTo", FromTo), AnimateExecutor.registerBuiltInAnimate("scaleIn", ScaleIn), AnimateExecutor.registerBuiltInAnimate("scaleOut", ScaleOut), AnimateExecutor.registerBuiltInAnimate("growHeightIn", GrowHeightIn), AnimateExecutor.registerBuiltInAnimate("growHeightOut", GrowHeightOut), AnimateExecutor.registerBuiltInAnimate("growWidthIn", GrowWidthIn), AnimateExecutor.registerBuiltInAnimate("growWidthOut", GrowWidthOut), AnimateExecutor.registerBuiltInAnimate("growCenterIn", GrowCenterIn), AnimateExecutor.registerBuiltInAnimate("growCenterOut", GrowCenterOut), AnimateExecutor.registerBuiltInAnimate("clipIn", ClipIn), AnimateExecutor.registerBuiltInAnimate("clipOut", ClipOut), AnimateExecutor.registerBuiltInAnimate("fadeIn", FadeIn), AnimateExecutor.registerBuiltInAnimate("fadeOut", FadeOut), AnimateExecutor.registerBuiltInAnimate("growPointsIn", GrowPointsIn), AnimateExecutor.registerBuiltInAnimate("growPointsOut", GrowPointsOut), AnimateExecutor.registerBuiltInAnimate("growPointsXIn", GrowPointsXIn), AnimateExecutor.registerBuiltInAnimate("growPointsXOut", GrowPointsXOut), AnimateExecutor.registerBuiltInAnimate("growPointsYIn", GrowPointsYIn), AnimateExecutor.registerBuiltInAnimate("growPointsYOut", GrowPointsYOut), AnimateExecutor.registerBuiltInAnimate("growAngleIn", GrowAngleIn), AnimateExecutor.registerBuiltInAnimate("growAngleOut", GrowAngleOut), AnimateExecutor.registerBuiltInAnimate("growRadiusIn", GrowRadiusIn), AnimateExecutor.registerBuiltInAnimate("growRadiusOut", GrowRadiusOut), AnimateExecutor.registerBuiltInAnimate("moveIn", MoveIn), AnimateExecutor.registerBuiltInAnimate("moveOut", MoveOut), AnimateExecutor.registerBuiltInAnimate("rotateIn", RotateIn), AnimateExecutor.registerBuiltInAnimate("rotateOut", RotateOut), AnimateExecutor.registerBuiltInAnimate("update", Update), AnimateExecutor.registerBuiltInAnimate("state", State), AnimateExecutor.registerBuiltInAnimate("labelItemAppear", LabelItemAppear), AnimateExecutor.registerBuiltInAnimate("labelItemDisappear", LabelItemDisappear), AnimateExecutor.registerBuiltInAnimate("poptipAppear", PoptipAppear), AnimateExecutor.registerBuiltInAnimate("poptipDisappear", PoptipDisappear), AnimateExecutor.registerBuiltInAnimate("inputText", InputText), AnimateExecutor.registerBuiltInAnimate("inputRichText", InputRichText), AnimateExecutor.registerBuiltInAnimate("outputRichText", OutputRichText), AnimateExecutor.registerBuiltInAnimate("slideRichText", SlideRichText), AnimateExecutor.registerBuiltInAnimate("slideOutRichText", SlideOutRichText), AnimateExecutor.registerBuiltInAnimate("slideIn", SlideIn), AnimateExecutor.registerBuiltInAnimate("growIn", GrowIn), AnimateExecutor.registerBuiltInAnimate("spinIn", SpinIn), AnimateExecutor.registerBuiltInAnimate("moveScaleIn", MoveScaleIn), AnimateExecutor.registerBuiltInAnimate("moveRotateIn", MoveRotateIn), AnimateExecutor.registerBuiltInAnimate("strokeIn", StrokeIn), AnimateExecutor.registerBuiltInAnimate("slideOut", SlideOut), AnimateExecutor.registerBuiltInAnimate("growOut", GrowOut), AnimateExecutor.registerBuiltInAnimate("spinOut", SpinOut), AnimateExecutor.registerBuiltInAnimate("moveScaleOut", MoveScaleOut), AnimateExecutor.registerBuiltInAnimate("moveRotateOut", MoveRotateOut), AnimateExecutor.registerBuiltInAnimate("strokeOut", StrokeOut), AnimateExecutor.registerBuiltInAnimate("pulse", PulseAnimate), AnimateExecutor.registerBuiltInAnimate("MotionPath", MotionPath), AnimateExecutor.registerBuiltInAnimate("streamLight", StreamLight), AnimateExecutor.registerBuiltInAnimate("dissolve", Dissolve), AnimateExecutor.registerBuiltInAnimate("grayscale", Grayscale), AnimateExecutor.registerBuiltInAnimate("distortion", Distortion), AnimateExecutor.registerBuiltInAnimate("particle", Particle), AnimateExecutor.registerBuiltInAnimate("glitch", Glitch), AnimateExecutor.registerBuiltInAnimate("gaussianBlur", GaussianBlur), AnimateExecutor.registerBuiltInAnimate("pixelation", Pixelation);
|
|
35148
36416
|
};
|
|
35149
36417
|
|
|
35150
|
-
const version = "1.0.
|
|
36418
|
+
const version = "1.0.13-alpha.1";
|
|
35151
36419
|
preLoadAllModule();
|
|
35152
36420
|
if (isBrowserEnv()) {
|
|
35153
36421
|
loadBrowserEnv(container);
|
|
@@ -35183,4 +36451,4 @@ registerOrthoCamera();
|
|
|
35183
36451
|
registerCustomAnimate();
|
|
35184
36452
|
registerAnimate();
|
|
35185
36453
|
|
|
35186
|
-
export { AComponentAnimate, ACustomAnimate, ARC3D_NUMBER_TYPE, ARC_NUMBER_TYPE, AREA_NUMBER_TYPE, AStageAnimate, AbstractGraphicRender, Animate, AnimateExecutor, AnimateMode, AnimateStatus, Step as AnimateStep, AnimateStepType, AnimationStateManager, AnimationStateStore, AnimationStates, AnimationTransitionRegistry, Application, Arc, Arc3d, Arc3dRender, ArcRender, ArcRenderContribution, Area, AreaRender, AreaRenderContribution, AttributeUpdateType, AutoEnablePlugins, BaseCanvas, BaseEnvContribution, BaseRender, BaseRenderContributionTime, BaseWindowHandlerContribution, Basis, BeforeRenderConstribution, BoundsContext, BoundsPicker, BrowserEnvContribution, CIRCLE_NUMBER_TYPE, Canvas3DDrawItemInterceptor, Canvas3DPickItemInterceptor, CanvasArc3dPicker, CanvasArcPicker, CanvasAreaPicker, CanvasCirclePicker, CanvasFactory, CanvasGifImagePicker, CanvasGlyphPicker, CanvasGroupPicker, CanvasImagePicker, CanvasLinePicker, CanvasLottiePicker, CanvasPathPicker, CanvasPickerContribution, CanvasPolygonPicker, CanvasPyramid3dPicker, CanvasRect3dPicker, CanvasRectPicker, CanvasRichTextPicker, CanvasStarPicker, CanvasSymbolPicker, CanvasTextLayout, CanvasTextPicker, Circle, CircleRender, CircleRenderContribution, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipIn, ClipOut, ClipRadiusAnimate, ColorInterpolate, ColorStore, ColorType, CommonDrawItemInterceptorContribution, CommonRenderContribution, ComponentAnimator, Container, ContainerModule, Context2dFactory, ContributionProvider, ContributionStore, CubicBezierCurve, CurveContext, CurveTypeEnum, CustomEvent, CustomPath2D, CustomSymbolClass, DEFAULT_TEXT_FONT_FAMILY, DebugDrawItemInterceptorContribution, DefaultArcAllocate, DefaultArcAttribute, DefaultArcRenderContribution, DefaultAreaAllocate, DefaultAreaAttribute, DefaultAreaTextureRenderContribution, DefaultAttribute, DefaultBaseBackgroundRenderContribution, DefaultBaseClipRenderAfterContribution, DefaultBaseClipRenderBeforeContribution, DefaultBaseInteractiveRenderContribution, DefaultBaseTextureRenderContribution, DefaultCanvasAllocate, DefaultCanvasArcRender, DefaultCanvasAreaRender, DefaultCanvasCircleRender, DefaultCanvasGroupRender, DefaultCanvasImageRender, DefaultCanvasLineRender, DefaultCanvasPathRender, DefaultCanvasPolygonRender, DefaultCanvasRectRender, DefaultCanvasSymbolRender, DefaultCanvasTextRender, DefaultCircleAllocate, DefaultCircleAttribute, DefaultCircleRenderContribution, DefaultConnectAttribute, DefaultDebugAttribute, DefaultFillStyle, DefaultGlobal, DefaultGlobalPickerService, DefaultGlyphAttribute, DefaultGraphicAllocate, DefaultGraphicMemoryManager, DefaultGraphicService, DefaultGraphicUtil, DefaultGroupAttribute, DefaultGroupBackgroundRenderContribution, DefaultImageAttribute, DefaultImageRenderContribution, DefaultLayerService, DefaultLayout, DefaultLineAllocate, DefaultLineAttribute, DefaultMat4Allocate, DefaultMatrixAllocate, DefaultPathAllocate, DefaultPathAttribute, DefaultPickService, DefaultPickStyle, DefaultPolygonAttribute, DefaultRect3dAttribute, DefaultRectAllocate, DefaultRectAttribute, DefaultRectRenderContribution, DefaultRenderService, DefaultRichTextAttribute, DefaultRichTextIconAttribute, DefaultStarAttribute, DefaultStrokeStyle, DefaultStyle, DefaultSymbolAllocate, DefaultSymbolAttribute, DefaultSymbolClipRangeStrokeRenderContribution, DefaultSymbolRenderContribution, DefaultTextAllocate, DefaultTextAttribute, DefaultTextMeasureContribution, DefaultTextStyle, DefaultTicker, DefaultTimeline, DefaultTransform, DefaultTransformUtil, DefaultWindow, Direction, DirectionalLight, DragNDrop, DrawContribution, DrawItemInterceptor, DynamicLayerHandlerContribution, Easing, Edge, EditModule, EmptyContext2d, EnvContribution, EventManager, EventSystem, EventTarget, FORMAT_ALL_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, Factory, FadeIn, FadeOut, FederatedEvent, FederatedMouseEvent, FederatedPointerEvent, FederatedWheelEvent, FlexLayoutPlugin, Fragment, FromTo, GLYPH_NUMBER_TYPE, GRAPHIC_UPDATE_TAG_KEY, GROUP_NUMBER_TYPE, Generator, Gesture, GifImage, GlobalPickerService, Glyph, GlyphRender, Graphic, GraphicCreator$1 as GraphicCreator, GraphicPicker, GraphicRender, GraphicService, GraphicStateExtension, GraphicUtil, Group, GroupFadeIn, GroupFadeOut, GroupRender, GroupRenderContribution, GroupUpdateAABBBoundsMode, GrowAngleIn, GrowAngleOut, GrowCenterIn, GrowCenterOut, GrowHeightIn, GrowHeightOut, GrowIn, GrowOut, GrowPointsIn, GrowPointsOut, GrowPointsXIn, GrowPointsXOut, GrowPointsYIn, GrowPointsYOut, GrowRadiusIn, GrowRadiusOut, GrowWidthIn, GrowWidthOut, HtmlAttributePlugin, IContainPointMode, IMAGE_NUMBER_TYPE, Image$1 as Image, ImageRender, ImageRenderContribution, IncreaseCount, IncrementalDrawContribution, InputRichText, InputText, InteractiveDrawItemInterceptorContribution, InteractivePickItemInterceptorContribution, InteractiveSubRenderContribution, LINE_NUMBER_TYPE, LabelItemAppear, LabelItemDisappear, Layer, LayerService, Line$1 as Line, LineRender, Linear, LinearClosed, Lottie, ManualTicker, Mat4Allocate, MathArcPicker, MathAreaPicker, MathCirclePicker, MathGlyphPicker, MathImagePicker, MathLinePicker, MathPathPicker, MathPickerContribution, MathPolygonPicker, MathRectPicker, MathSymbolPicker, MathTextPicker, MatrixAllocate, MeasureModeEnum, MonotoneX, MonotoneY, MorphingPath, MotionPath, MoveIn, MoveOut, MoveRotateIn, MoveRotateOut, MoveScaleIn, MoveScaleOut, MultiToOneMorphingPath, NOWORK_ANIMATE_ATTR, Node, OrthoCamera, OutputRichText, PATH_NUMBER_TYPE, POLYGON_NUMBER_TYPE, PURE_STYLE_KEY, PYRAMID3D_NUMBER_TYPE, Path, PathRender, PathRenderContribution, PerformanceRAF, PickItemInterceptor, PickServiceInterceptor, PickerService, PluginService, Polygon, PolygonRender, PolygonRenderContribution, PoptipAppear, PoptipDisappear, PulseAnimate, Pyramid3d, Pyramid3dRender, REACT_TO_CANOPUS_EVENTS, REACT_TO_CANOPUS_EVENTS_LIST, RECT3D_NUMBER_TYPE, RECT_NUMBER_TYPE, RICHTEXT_NUMBER_TYPE, RafBasedSTO, ReactAttributePlugin, Rect, Rect3DRender, Rect3d, RectRender, RectRenderContribution, ReflectSegContext, RenderSelector, RenderService, ResourceLoader, RichText, RichTextEditPlugin, RichTextRender, RotateBySphereAnimate, RotateIn, RotateOut, STAR_NUMBER_TYPE, STATUS$1 as STATUS, SVG_ATTRIBUTE_MAP, SVG_ATTRIBUTE_MAP_KEYS, SVG_PARSE_ATTRIBUTE_MAP, SVG_PARSE_ATTRIBUTE_MAP_KEYS, SYMBOL_NUMBER_TYPE, ScaleIn, ScaleOut, SegContext, ShadowPickServiceInterceptorContribution, ShadowRoot, ShadowRootDrawItemInterceptorContribution, ShadowRootPickItemInterceptorContribution, SlideIn, SlideOut, SlideOutRichText, SlideRichText, SpinIn, SpinOut, SplitRectAfterRenderContribution, SplitRectBeforeRenderContribution, Stage, Star, StarRender, StarRenderContribution, State, StaticLayerHandlerContribution, Step$1 as Step, StepClosed, StreamLight, StrokeIn, StrokeOut, Symbol$1 as Symbol, SymbolRender, SymbolRenderContribution, TEXT_NUMBER_TYPE, TagPointsUpdate, Text, TextDirection, TextMeasureContribution, TextRender, TextRenderContribution, Theme, TransformUtil, Update, UpdateTag, VArc, VArc3d, VArea, VCircle, VGlobal, VGlyph, VGroup, VImage, VLine, VPath, VPolygon, VPyramid3d, VRect, VRect3d, VRichText, VSymbol, VText, VWindow, ViewTransform3dPlugin, VirtualLayerHandlerContribution, WILDCARD, WindowHandlerContribution, WrapText, XMLParser, _calculateLineHeight, _interpolateColor, _registerArc, addArcToBezierPath$1 as addArcToBezierPath, addAttributeToPrototype, alignBezierCurves, alignSubpath, alternatingWave, application, applyTransformOnBezierCurves, arc3dCanvasPickModule, arc3dModule, arcCanvasPickModule, arcMathPickModule, arcModule, areaCanvasPickModule, areaMathPickModule, areaModule, bezier, bezierCurversToPath, binarySplitPolygon, bindContributionProvider, bindContributionProviderNoSingletonScope, boundStroke, browserEnvModule, builtInSymbolStrMap, builtinSymbols, builtinSymbolsMap, calcLineCache, calculateArcCornerRadius, calculateLineHeight, canvasAllocate, centerToCorner, centroidOfSubpath, circleBounds, circleCanvasPickModule, circleMathPickModule, circleModule, clock, colorEqual, colorStringInterpolationToStr, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, container, cornerTangents, cornerToCenter, createArc, createArc3d, createArea, createCanvasEventTransformer, createCircle, createColor, createComponentAnimator, createConicalGradient, createEventTransformer, createGifImage, createGlyph, createGroup, createImage, createImageElement$1 as createImageElement, createLine, createLottie, createMat4, createPath, createPolygon, createPyramid3d, createRect, createRect3d, createRectPath, createRichText, createShadowRoot, createStage, createStar, createSymbol, createText, createWrapText, cubicCalc, cubicLength, cubicPointAt, cubicSubdivide, decodeReactDom, defaultArcAllocate, defaultArcBackgroundRenderContribution, defaultArcRenderContribution, defaultArcTextureRenderContribution, defaultAreaAllocate, defaultBaseBackgroundRenderContribution, defaultBaseClipRenderAfterContribution, defaultBaseClipRenderBeforeContribution, defaultBaseTextureRenderContribution, defaultCircleAllocate, defaultCircleBackgroundRenderContribution, defaultCircleRenderContribution, defaultCircleTextureRenderContribution, defaultGraphicMemoryManager, defaultGroupBackgroundRenderContribution, defaultImageBackgroundRenderContribution, defaultImageRenderContribution, defaultLineAllocate, defaultPathAllocate, defaultRectAllocate, defaultRectBackgroundRenderContribution, defaultRectRenderContribution, defaultRectTextureRenderContribution, defaultStarBackgroundRenderContribution, defaultStarTextureRenderContribution, defaultSymbolAllocate, defaultSymbolBackgroundRenderContribution, defaultSymbolClipRangeStrokeRenderContribution, defaultSymbolRenderContribution, defaultSymbolTextureRenderContribution, defaultTextAllocate, diagonalCenterToEdge, diagonalTopLeftToBottomRight, diff, divideCubic, drawArc, drawArcPath$1 as drawArcPath, drawAreaSegments, drawIncrementalAreaSegments, drawIncrementalSegments, drawSegments, enumCommandMap, feishuEnvModule, fillVisible, findBestMorphingRotation, findConfigIndexByCursorIdx, findCursorIdxByConfigIndex, findNextGraphic, flatten_simplify, foreach, foreachAsync, genBasisSegments, genBasisTypeSegments, genLinearClosedSegments, genLinearClosedTypeSegments, genLinearSegments, genLinearTypeSegments, genMonotoneXSegments, genMonotoneXTypeSegments, genMonotoneYSegments, genMonotoneYTypeSegments, genNumberType, genStepClosedSegments, genStepSegments, genStepTypeSegments, generatorPathEasingFunc, getAttributeFromDefaultAttrList, getConicGradientAt, getCurrentEnv, getDefaultCharacterConfig, getExtraModelMatrix, getModelMatrix, getRichTextBounds, getScaledStroke, getTextBounds, getTheme, getThemeFromGroup, gifImageCanvasPickModule, gifImageModule, globalTheme, glyphCanvasPickModule, glyphMathPickModule, glyphModule, graphicCreator, graphicService, graphicUtil, harmonyEnvModule, identityMat4, imageCanvasPickModule, imageMathPickModule, imageModule, incrementalAddTo, initAllEnv, initBrowserEnv, initFeishuEnv, initHarmonyEnv, initLynxEnv, initNodeEnv, initTTEnv, initTaroEnv, initWxEnv, inject, injectable, interpolateColor, interpolateGradientConicalColor, interpolateGradientLinearColor, interpolateGradientRadialColor, interpolatePureColorArray, interpolatePureColorArrayToStr, intersect, isBrowserEnv, isNodeEnv, isSvg, isXML, jsx, layerService, lineCanvasPickModule, lineMathPickModule, lineModule, loadAllEnv, loadAllModule, loadBrowserEnv, loadFeishuEnv, loadHarmonyEnv, loadLynxEnv, loadNodeEnv, loadTTEnv, loadTaroEnv, loadWxEnv, lookAt, lottieCanvasPickModule, lottieModule, lynxEnvModule, mapToCanvasPointForCanvas, mat3Tomat4, mat4Allocate, matrixAllocate, morphPath, multiInject, multiToOneMorph, multiplyMat4Mat3, multiplyMat4Mat4, named, newThemeObj, nodeEnvModule, oneToMultiMorph, ortho, parsePadding, parseStroke, parseSvgPath, particleEffect, pathCanvasPickModule, pathMathPickModule, pathModule, pathToBezierCurves, point$3 as point, pointEqual, pointInterpolation, pointInterpolationHighPerformance, pointsEqual, pointsInterpolation, polygonCanvasPickModule, polygonMathPickModule, polygonModule, preLoadAllModule, pulseWave, pyramid3dCanvasPickModule, pyramid3dModule, quadCalc, quadLength, quadPointAt, rafBasedSto, randomOpacity, rect3dCanvasPickModule, rect3dModule, rectCanvasPickModule, rectFillVisible, rectMathPickModule, rectModule, rectStrokeVisible, recursiveCallBinarySplit, registerAnimate, registerArc, registerArc3d, registerArc3dGraphic, registerArcGraphic, registerArea, registerAreaGraphic, registerCircle, registerCircleGraphic, registerCustomAnimate, registerDirectionalLight, registerFlexLayoutPlugin, registerGifGraphic, registerGifImage, registerGlobalEventTransformer, registerGlyph, registerGlyphGraphic, registerGroup, registerGroupGraphic, registerHtmlAttributePlugin, registerImage, registerImageGraphic, registerLine, registerLineGraphic, registerOrthoCamera, registerPath, registerPathGraphic, registerPolygon, registerPolygonGraphic, registerPyramid3d, registerPyramid3dGraphic, registerReactAttributePlugin, registerRect, registerRect3d, registerRect3dGraphic, registerRectGraphic, registerRichtext, registerRichtextGraphic, registerShadowRoot, registerShadowRootGraphic, registerStar, registerStarGraphic, registerSymbol, registerSymbolGraphic, registerText, registerTextGraphic, registerViewTransform3dPlugin, registerWindowEventTransformer, registerWrapText, registerWrapTextGraphic, renderCommandList, renderService, rewriteProto, richTextMathPickModule, richtextCanvasPickModule, richtextModule, rippleEffect, rotateX, rotateY, rotateZ, rotationScan, roughModule, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, runFill, runStroke, scaleMat4, segments, shouldUseMat4, snakeWave, snapLength, spiralEffect, splitArc, splitArea, splitCircle, splitLine, splitPath, splitPolygon, splitRect, splitToGrids, starModule, strCommandMap, strokeVisible, symbolCanvasPickModule, symbolMathPickModule, symbolModule, taroEnvModule, textAttributesToStyle, textCanvasPickModule, textDrawOffsetX, textDrawOffsetY, textLayoutOffsetY, textMathPickModule, textModule, transformMat4, transformPointForCanvas, transformUtil, transitionRegistry, translate, ttEnvModule, version, verticalLayout, vglobal, waitForAllSubLayers, wrapCanvas, wrapContext, wxEnvModule, xul };
|
|
36454
|
+
export { AComponentAnimate, ACustomAnimate, ARC3D_NUMBER_TYPE, ARC_NUMBER_TYPE, AREA_NUMBER_TYPE, AStageAnimate, AbstractGraphicRender, Animate, AnimateExecutor, AnimateMode, AnimateStatus, Step as AnimateStep, AnimateStepType, AnimationStateManager, AnimationStateStore, AnimationStates, AnimationTransitionRegistry, Application, Arc, Arc3d, Arc3dRender, ArcRender, ArcRenderContribution, Area, AreaRender, AreaRenderContribution, AttributeUpdateType, AutoEnablePlugins, BaseCanvas, BaseEnvContribution, BaseRender, BaseRenderContributionTime, BaseWindowHandlerContribution, Basis, BeforeRenderConstribution, BoundsContext, BoundsPicker, BrowserEnvContribution, CIRCLE_NUMBER_TYPE, Canvas3DDrawItemInterceptor, Canvas3DPickItemInterceptor, CanvasArc3dPicker, CanvasArcPicker, CanvasAreaPicker, CanvasCirclePicker, CanvasFactory, CanvasGifImagePicker, CanvasGlyphPicker, CanvasGroupPicker, CanvasImagePicker, CanvasLinePicker, CanvasLottiePicker, CanvasPathPicker, CanvasPickerContribution, CanvasPolygonPicker, CanvasPyramid3dPicker, CanvasRect3dPicker, CanvasRectPicker, CanvasRichTextPicker, CanvasStarPicker, CanvasSymbolPicker, CanvasTextLayout, CanvasTextPicker, Circle, CircleRender, CircleRenderContribution, ClipAngleAnimate, ClipDirectionAnimate, ClipGraphicAnimate, ClipIn, ClipOut, ClipRadiusAnimate, ColorInterpolate, ColorStore, ColorType, CommonDrawItemInterceptorContribution, CommonRenderContribution, ComponentAnimator, Container, ContainerModule, Context2dFactory, ContributionProvider, ContributionStore, CubicBezierCurve, CurveContext, CurveTypeEnum, CustomEvent, CustomPath2D, CustomSymbolClass, DEFAULT_TEXT_FONT_FAMILY, DebugDrawItemInterceptorContribution, DefaultArcAllocate, DefaultArcAttribute, DefaultArcRenderContribution, DefaultAreaAllocate, DefaultAreaAttribute, DefaultAreaTextureRenderContribution, DefaultAttribute, DefaultBaseBackgroundRenderContribution, DefaultBaseClipRenderAfterContribution, DefaultBaseClipRenderBeforeContribution, DefaultBaseInteractiveRenderContribution, DefaultBaseTextureRenderContribution, DefaultCanvasAllocate, DefaultCanvasArcRender, DefaultCanvasAreaRender, DefaultCanvasCircleRender, DefaultCanvasGroupRender, DefaultCanvasImageRender, DefaultCanvasLineRender, DefaultCanvasPathRender, DefaultCanvasPolygonRender, DefaultCanvasRectRender, DefaultCanvasSymbolRender, DefaultCanvasTextRender, DefaultCircleAllocate, DefaultCircleAttribute, DefaultCircleRenderContribution, DefaultConnectAttribute, DefaultDebugAttribute, DefaultFillStyle, DefaultGlobal, DefaultGlobalPickerService, DefaultGlyphAttribute, DefaultGraphicAllocate, DefaultGraphicMemoryManager, DefaultGraphicService, DefaultGraphicUtil, DefaultGroupAttribute, DefaultGroupBackgroundRenderContribution, DefaultImageAttribute, DefaultImageRenderContribution, DefaultLayerService, DefaultLayout, DefaultLineAllocate, DefaultLineAttribute, DefaultMat4Allocate, DefaultMatrixAllocate, DefaultPathAllocate, DefaultPathAttribute, DefaultPickService, DefaultPickStyle, DefaultPolygonAttribute, DefaultRect3dAttribute, DefaultRectAllocate, DefaultRectAttribute, DefaultRectRenderContribution, DefaultRenderService, DefaultRichTextAttribute, DefaultRichTextIconAttribute, DefaultStarAttribute, DefaultStrokeStyle, DefaultStyle, DefaultSymbolAllocate, DefaultSymbolAttribute, DefaultSymbolClipRangeStrokeRenderContribution, DefaultSymbolRenderContribution, DefaultTextAllocate, DefaultTextAttribute, DefaultTextMeasureContribution, DefaultTextStyle, DefaultTicker, DefaultTimeline, DefaultTransform, DefaultTransformUtil, DefaultWindow, Direction, DirectionalLight, Dissolve, Distortion, DragNDrop, DrawContribution, DrawItemInterceptor, DynamicLayerHandlerContribution, Easing, Edge, EditModule, EmptyContext2d, EnvContribution, EventManager, EventSystem, EventTarget, FORMAT_ALL_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, Factory, FadeIn, FadeOut, FederatedEvent, FederatedMouseEvent, FederatedPointerEvent, FederatedWheelEvent, FlexLayoutPlugin, Fragment, FromTo, GLYPH_NUMBER_TYPE, GRAPHIC_UPDATE_TAG_KEY, GROUP_NUMBER_TYPE, GaussianBlur, Generator, Gesture, GifImage, Glitch, GlobalPickerService, Glyph, GlyphRender, Graphic, GraphicCreator$1 as GraphicCreator, GraphicPicker, GraphicRender, GraphicService, GraphicStateExtension, GraphicUtil, Grayscale, Group, GroupFadeIn, GroupFadeOut, GroupRender, GroupRenderContribution, GroupUpdateAABBBoundsMode, GrowAngleIn, GrowAngleOut, GrowCenterIn, GrowCenterOut, GrowHeightIn, GrowHeightOut, GrowIn, GrowOut, GrowPointsIn, GrowPointsOut, GrowPointsXIn, GrowPointsXOut, GrowPointsYIn, GrowPointsYOut, GrowRadiusIn, GrowRadiusOut, GrowWidthIn, GrowWidthOut, HtmlAttributePlugin, IContainPointMode, IMAGE_NUMBER_TYPE, Image$1 as Image, ImageRender, ImageRenderContribution, IncreaseCount, IncrementalDrawContribution, InputRichText, InputText, InteractiveDrawItemInterceptorContribution, InteractivePickItemInterceptorContribution, InteractiveSubRenderContribution, LINE_NUMBER_TYPE, LabelItemAppear, LabelItemDisappear, Layer, LayerService, Line$1 as Line, LineRender, Linear, LinearClosed, Lottie, ManualTicker, Mat4Allocate, MathArcPicker, MathAreaPicker, MathCirclePicker, MathGlyphPicker, MathImagePicker, MathLinePicker, MathPathPicker, MathPickerContribution, MathPolygonPicker, MathRectPicker, MathSymbolPicker, MathTextPicker, MatrixAllocate, MeasureModeEnum, MonotoneX, MonotoneY, MorphingPath, MotionPath, MoveIn, MoveOut, MoveRotateIn, MoveRotateOut, MoveScaleIn, MoveScaleOut, MultiToOneMorphingPath, NOWORK_ANIMATE_ATTR, Node, OrthoCamera, OutputRichText, PATH_NUMBER_TYPE, POLYGON_NUMBER_TYPE, PURE_STYLE_KEY, PYRAMID3D_NUMBER_TYPE, Particle, Path, PathRender, PathRenderContribution, PerformanceRAF, PickItemInterceptor, PickServiceInterceptor, PickerService, Pixelation, PluginService, Polygon, PolygonRender, PolygonRenderContribution, PoptipAppear, PoptipDisappear, PulseAnimate, Pyramid3d, Pyramid3dRender, REACT_TO_CANOPUS_EVENTS, REACT_TO_CANOPUS_EVENTS_LIST, RECT3D_NUMBER_TYPE, RECT_NUMBER_TYPE, RICHTEXT_NUMBER_TYPE, RafBasedSTO, ReactAttributePlugin, Rect, Rect3DRender, Rect3d, RectRender, RectRenderContribution, ReflectSegContext, RenderSelector, RenderService, ResourceLoader, RichText, RichTextEditPlugin, RichTextRender, RotateBySphereAnimate, RotateIn, RotateOut, STAR_NUMBER_TYPE, STATUS$1 as STATUS, SVG_ATTRIBUTE_MAP, SVG_ATTRIBUTE_MAP_KEYS, SVG_PARSE_ATTRIBUTE_MAP, SVG_PARSE_ATTRIBUTE_MAP_KEYS, SYMBOL_NUMBER_TYPE, ScaleIn, ScaleOut, SegContext, ShadowPickServiceInterceptorContribution, ShadowRoot, ShadowRootDrawItemInterceptorContribution, ShadowRootPickItemInterceptorContribution, SlideIn, SlideOut, SlideOutRichText, SlideRichText, SpinIn, SpinOut, SplitRectAfterRenderContribution, SplitRectBeforeRenderContribution, Stage, Star, StarRender, StarRenderContribution, State, StaticLayerHandlerContribution, Step$1 as Step, StepClosed, StreamLight, StrokeIn, StrokeOut, Symbol$1 as Symbol, SymbolRender, SymbolRenderContribution, TEXT_NUMBER_TYPE, TagPointsUpdate, Text, TextDirection, TextMeasureContribution, TextRender, TextRenderContribution, Theme, TransformUtil, Update, UpdateTag, VArc, VArc3d, VArea, VCircle, VGlobal, VGlyph, VGroup, VImage, VLine, VPath, VPolygon, VPyramid3d, VRect, VRect3d, VRichText, VSymbol, VText, VWindow, ViewTransform3dPlugin, VirtualLayerHandlerContribution, WILDCARD, WindowHandlerContribution, WrapText, XMLParser, _calculateLineHeight, _interpolateColor, _registerArc, addArcToBezierPath$1 as addArcToBezierPath, addAttributeToPrototype, alignBezierCurves, alignSubpath, alternatingWave, application, applyTransformOnBezierCurves, arc3dCanvasPickModule, arc3dModule, arcCanvasPickModule, arcMathPickModule, arcModule, areaCanvasPickModule, areaMathPickModule, areaModule, bezier, bezierCurversToPath, binarySplitPolygon, bindContributionProvider, bindContributionProviderNoSingletonScope, boundStroke, browserEnvModule, builtInSymbolStrMap, builtinSymbols, builtinSymbolsMap, calcLineCache, calculateArcCornerRadius, calculateLineHeight, canvasAllocate, centerToCorner, centroidOfSubpath, circleBounds, circleCanvasPickModule, circleMathPickModule, circleModule, clock, colorEqual, colorStringInterpolationToStr, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, container, cornerTangents, cornerToCenter, createArc, createArc3d, createArea, createCanvasEventTransformer, createCircle, createColor, createComponentAnimator, createConicalGradient, createEventTransformer, createGifImage, createGlyph, createGroup, createImage, createImageElement$1 as createImageElement, createLine, createLottie, createMat4, createPath, createPolygon, createPyramid3d, createRect, createRect3d, createRectPath, createRichText, createShadowRoot, createStage, createStar, createSymbol, createText, createWrapText, cubicCalc, cubicLength, cubicPointAt, cubicSubdivide, decodeReactDom, defaultArcAllocate, defaultArcBackgroundRenderContribution, defaultArcRenderContribution, defaultArcTextureRenderContribution, defaultAreaAllocate, defaultBaseBackgroundRenderContribution, defaultBaseClipRenderAfterContribution, defaultBaseClipRenderBeforeContribution, defaultBaseTextureRenderContribution, defaultCircleAllocate, defaultCircleBackgroundRenderContribution, defaultCircleRenderContribution, defaultCircleTextureRenderContribution, defaultGraphicMemoryManager, defaultGroupBackgroundRenderContribution, defaultImageBackgroundRenderContribution, defaultImageRenderContribution, defaultLineAllocate, defaultPathAllocate, defaultRectAllocate, defaultRectBackgroundRenderContribution, defaultRectRenderContribution, defaultRectTextureRenderContribution, defaultStarBackgroundRenderContribution, defaultStarTextureRenderContribution, defaultSymbolAllocate, defaultSymbolBackgroundRenderContribution, defaultSymbolClipRangeStrokeRenderContribution, defaultSymbolRenderContribution, defaultSymbolTextureRenderContribution, defaultTextAllocate, diagonalCenterToEdge, diagonalTopLeftToBottomRight, diff, divideCubic, drawArc, drawArcPath$1 as drawArcPath, drawAreaSegments, drawIncrementalAreaSegments, drawIncrementalSegments, drawSegments, enumCommandMap, feishuEnvModule, fillVisible, findBestMorphingRotation, findConfigIndexByCursorIdx, findCursorIdxByConfigIndex, findNextGraphic, flatten_simplify, foreach, foreachAsync, genBasisSegments, genBasisTypeSegments, genLinearClosedSegments, genLinearClosedTypeSegments, genLinearSegments, genLinearTypeSegments, genMonotoneXSegments, genMonotoneXTypeSegments, genMonotoneYSegments, genMonotoneYTypeSegments, genNumberType, genStepClosedSegments, genStepSegments, genStepTypeSegments, generatorPathEasingFunc, getAttributeFromDefaultAttrList, getConicGradientAt, getCurrentEnv, getDefaultCharacterConfig, getExtraModelMatrix, getModelMatrix, getRichTextBounds, getScaledStroke, getTextBounds, getTheme, getThemeFromGroup, gifImageCanvasPickModule, gifImageModule, globalTheme, glyphCanvasPickModule, glyphMathPickModule, glyphModule, graphicCreator, graphicService, graphicUtil, harmonyEnvModule, identityMat4, imageCanvasPickModule, imageMathPickModule, imageModule, incrementalAddTo, initAllEnv, initBrowserEnv, initFeishuEnv, initHarmonyEnv, initLynxEnv, initNodeEnv, initTTEnv, initTaroEnv, initWxEnv, inject, injectable, interpolateColor, interpolateGradientConicalColor, interpolateGradientLinearColor, interpolateGradientRadialColor, interpolatePureColorArray, interpolatePureColorArrayToStr, intersect, isBrowserEnv, isNodeEnv, isSvg, isXML, jsx, layerService, lineCanvasPickModule, lineMathPickModule, lineModule, loadAllEnv, loadAllModule, loadBrowserEnv, loadFeishuEnv, loadHarmonyEnv, loadLynxEnv, loadNodeEnv, loadTTEnv, loadTaroEnv, loadWxEnv, lookAt, lottieCanvasPickModule, lottieModule, lynxEnvModule, mapToCanvasPointForCanvas, mat3Tomat4, mat4Allocate, matrixAllocate, morphPath, multiInject, multiToOneMorph, multiplyMat4Mat3, multiplyMat4Mat4, named, newThemeObj, nodeEnvModule, oneToMultiMorph, ortho, parsePadding, parseStroke, parseSvgPath, particleEffect, pathCanvasPickModule, pathMathPickModule, pathModule, pathToBezierCurves, point$3 as point, pointEqual, pointInterpolation, pointInterpolationHighPerformance, pointsEqual, pointsInterpolation, polygonCanvasPickModule, polygonMathPickModule, polygonModule, preLoadAllModule, pulseWave, pyramid3dCanvasPickModule, pyramid3dModule, quadCalc, quadLength, quadPointAt, rafBasedSto, randomOpacity, rect3dCanvasPickModule, rect3dModule, rectCanvasPickModule, rectFillVisible, rectMathPickModule, rectModule, rectStrokeVisible, recursiveCallBinarySplit, registerAnimate, registerArc, registerArc3d, registerArc3dGraphic, registerArcGraphic, registerArea, registerAreaGraphic, registerCircle, registerCircleGraphic, registerCustomAnimate, registerDirectionalLight, registerFlexLayoutPlugin, registerGifGraphic, registerGifImage, registerGlobalEventTransformer, registerGlyph, registerGlyphGraphic, registerGroup, registerGroupGraphic, registerHtmlAttributePlugin, registerImage, registerImageGraphic, registerLine, registerLineGraphic, registerOrthoCamera, registerPath, registerPathGraphic, registerPolygon, registerPolygonGraphic, registerPyramid3d, registerPyramid3dGraphic, registerReactAttributePlugin, registerRect, registerRect3d, registerRect3dGraphic, registerRectGraphic, registerRichtext, registerRichtextGraphic, registerShadowRoot, registerShadowRootGraphic, registerStar, registerStarGraphic, registerSymbol, registerSymbolGraphic, registerText, registerTextGraphic, registerViewTransform3dPlugin, registerWindowEventTransformer, registerWrapText, registerWrapTextGraphic, renderCommandList, renderService, rewriteProto, richTextMathPickModule, richtextCanvasPickModule, richtextModule, rippleEffect, rotateX, rotateY, rotateZ, rotationScan, roughModule, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, runFill, runStroke, scaleMat4, segments, shouldUseMat4, snakeWave, snapLength, spiralEffect, splitArc, splitArea, splitCircle, splitLine, splitPath, splitPolygon, splitRect, splitToGrids, starModule, strCommandMap, strokeVisible, symbolCanvasPickModule, symbolMathPickModule, symbolModule, taroEnvModule, textAttributesToStyle, textCanvasPickModule, textDrawOffsetX, textDrawOffsetY, textLayoutOffsetY, textMathPickModule, textModule, transformMat4, transformPointForCanvas, transformUtil, transitionRegistry, translate, ttEnvModule, version, verticalLayout, vglobal, waitForAllSubLayers, wrapCanvas, wrapContext, wxEnvModule, xul };
|