Skip to content

Commit

Permalink
feat: code format renderer
Browse files Browse the repository at this point in the history
  • Loading branch information
@drawcall
drawcall committed Sep 10, 2021
1 parent 2bd0415 commit 6fe846c
Show file tree
Hide file tree
Showing 3 changed files with 133 additions and 183 deletions.
256 changes: 114 additions & 142 deletions src/render/CanvasRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,159 +4,131 @@ import MathUtil from "../math/MathUtil";
import BaseRenderer from "./BaseRenderer";

export default class CanvasRenderer extends BaseRenderer {
constructor(element) {
super(element);

this.stroke = null;
this.context = this.element.getContext("2d");
this.bufferCache = {};
this.name = "CanvasRenderer";
constructor(element) {
super(element);

this.stroke = null;
this.context = this.element.getContext("2d");
this.bufferCache = {};
this.name = "CanvasRenderer";
}

resize(width, height) {
this.element.width = width;
this.element.height = height;
}

onProtonUpdate() {
this.context.clearRect(0, 0, this.element.width, this.element.height);
}

onParticleCreated(particle) {
if (particle.body) {
ImgUtil.getImgFromCache(particle.body, this.addImg2Body, particle);
} else {
particle.color = particle.color || "#ff0000";
}
}

resize(width, height) {
this.element.width = width;
this.element.height = height;
onParticleUpdate(particle) {
if (particle.body) {
if (particle.body instanceof Image) this.drawImage(particle);
} else {
this.drawCircle(particle);
}

onProtonUpdate() {
this.context.clearRect(0, 0, this.element.width, this.element.height);
}

onParticleDead(particle) {
particle.body = null;
}

// private method
addImg2Body(img, particle) {
particle.body = img;
}

// private drawCircle
drawImage(particle) {
const w = (particle.body.width * particle.scale) | 0;
const h = (particle.body.height * particle.scale) | 0;
const x = particle.p.x - w / 2;
const y = particle.p.y - h / 2;

if (!!particle.color) {
if (!particle.data["buffer"]) particle.data.buffer = this.createBuffer(particle.body);

const bufContext = particle.data.buffer.getContext("2d");
bufContext.clearRect(0, 0, particle.data.buffer.width, particle.data.buffer.height);
bufContext.globalAlpha = particle.alpha;
bufContext.drawImage(particle.body, 0, 0);

bufContext.globalCompositeOperation = "source-atop";
bufContext.fillStyle = ColorUtil.rgbToHex(particle.rgb);
bufContext.fillRect(0, 0, particle.data.buffer.width, particle.data.buffer.height);
bufContext.globalCompositeOperation = "source-over";
bufContext.globalAlpha = 1;

this.context.drawImage(
particle.data.buffer,
0,
0,
particle.data.buffer.width,
particle.data.buffer.height,
x,
y,
w,
h
);
} else {
this.context.save();

this.context.globalAlpha = particle.alpha;
this.context.translate(particle.p.x, particle.p.y);
this.context.rotate(MathUtil.degreeTransform(particle.rotation));
this.context.translate(-particle.p.x, -particle.p.y);
this.context.drawImage(particle.body, 0, 0, particle.body.width, particle.body.height, x, y, w, h);

this.context.globalAlpha = 1;
this.context.restore();
}

onParticleCreated(particle) {
if (particle.body) {
ImgUtil.getImgFromCache(particle.body, this.addImg2Body, particle);
} else {
particle.color = particle.color || "#ff0000";
}
}

// private drawCircle --
drawCircle(particle) {
if (particle.rgb) {
this.context.fillStyle = `rgba(${particle.rgb.r},${particle.rgb.g},${particle.rgb.b},${particle.alpha})`;
} else {
this.context.fillStyle = particle.color;
}

onParticleUpdate(particle) {
if (particle.body) {
if (particle.body instanceof Image) this.drawImage(particle);
} else {
this.drawCircle(particle);
}
}
// draw circle
this.context.beginPath();
this.context.arc(particle.p.x, particle.p.y, particle.radius, 0, Math.PI * 2, true);

onParticleDead(particle) {
particle.body = null;
if (this.stroke) {
this.context.strokeStyle = this.stroke.color;
this.context.lineWidth = this.stroke.thinkness;
this.context.stroke();
}

// private
addImg2Body(img, particle) {
particle.body = img;
}
this.context.closePath();
this.context.fill();
}

// private drawCircle
drawImage(particle) {
const w = (particle.body.width * particle.scale) | 0;
const h = (particle.body.height * particle.scale) | 0;
const x = particle.p.x - w / 2;
const y = particle.p.y - h / 2;

if (!!particle.color) {
if (!particle.data["buffer"])
particle.data.buffer = this.createBuffer(particle.body);

const bufContext = particle.data.buffer.getContext("2d");
bufContext.clearRect(
0,
0,
particle.data.buffer.width,
particle.data.buffer.height
);
bufContext.globalAlpha = particle.alpha;
bufContext.drawImage(particle.body, 0, 0);

bufContext.globalCompositeOperation = "source-atop";
bufContext.fillStyle = ColorUtil.rgbToHex(particle.rgb);
bufContext.fillRect(
0,
0,
particle.data.buffer.width,
particle.data.buffer.height
);
bufContext.globalCompositeOperation = "source-over";
bufContext.globalAlpha = 1;

this.context.drawImage(
particle.data.buffer,
0,
0,
particle.data.buffer.width,
particle.data.buffer.height,
x,
y,
w,
h
);
} else {
this.context.save();

this.context.globalAlpha = particle.alpha;
this.context.translate(particle.p.x, particle.p.y);
this.context.rotate(MathUtil.degreeTransform(particle.rotation));
this.context.translate(-particle.p.x, -particle.p.y);
this.context.drawImage(
particle.body,
0,
0,
particle.body.width,
particle.body.height,
x,
y,
w,
h
);

this.context.globalAlpha = 1;
this.context.restore();
}
}
// private createBuffer
createBuffer(image) {
if (image instanceof Image) {
const size = image.width + "_" + image.height;
let canvas = this.bufferCache[size];

// private drawCircle --
drawCircle(particle) {
if (particle.rgb) {
this.context.fillStyle = `rgba(${particle.rgb.r},${particle.rgb.g},${particle.rgb.b},${particle.alpha})`;
} else {
this.context.fillStyle = particle.color;
}

// draw circle
this.context.beginPath();
this.context.arc(
particle.p.x,
particle.p.y,
particle.radius,
0,
Math.PI * 2,
true
);

if (this.stroke) {
this.context.strokeStyle = this.stroke.color;
this.context.lineWidth = this.stroke.thinkness;
this.context.stroke();
}

this.context.closePath();
this.context.fill();
}
if (!canvas) {
canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
this.bufferCache[size] = canvas;
}

// private createBuffer
createBuffer(image) {
if (image instanceof Image) {
const size = image.width + "_" + image.height;
let canvas = this.bufferCache[size];

if (!canvas) {
canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
this.bufferCache[size] = canvas;
}

return canvas;
}
return canvas;
}
}
}
48 changes: 13 additions & 35 deletions src/render/DomRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ export default class DomRenderer extends BaseRenderer {
super(element);

this.stroke = null;
this.transform3d = false;
this.pool.create = (body, particle) => this.createBody(body, particle);
this.addImg2Body = this.addImg2Body.bind(this);

this.transform3d = false;
this.name = "DomRenderer";
}

Expand All @@ -25,24 +25,14 @@ export default class DomRenderer extends BaseRenderer {

onParticleUpdate(particle) {
if (this.bodyReady(particle)) {
if (this.transform3d)
DomUtil.transform3d(
particle.body,
particle.p.x,
particle.p.y,
particle.scale,
particle.rotation
);
else
DomUtil.transform(
particle.body,
particle.p.x,
particle.p.y,
particle.scale,
particle.rotation
);
if (this.transform3d) {
DomUtil.transform3d(particle.body, particle.p.x, particle.p.y, particle.scale, particle.rotation);
} else {
DomUtil.transform(particle.body, particle.p.x, particle.p.y, particle.scale, particle.rotation);
}

particle.body.style.opacity = particle.alpha;

if (particle.body.isCircle) {
particle.body.style.backgroundColor = particle.color || "#ff0000";
}
Expand All @@ -58,14 +48,10 @@ export default class DomRenderer extends BaseRenderer {
}

bodyReady(particle) {
return (
typeof particle.body === "object" &&
particle.body &&
!particle.body.isInner
);
return typeof particle.body === "object" && particle.body && !particle.body.isInner;
}

// private
// private method
addImg2Body(img, particle) {
if (particle.dead) return;
particle.body = this.pool.get(img, particle);
Expand All @@ -76,16 +62,12 @@ export default class DomRenderer extends BaseRenderer {

createBody(body, particle) {
if (body.isCircle) return this.createCircle(particle);
else return this.createSprite(body, particle);
return this.createSprite(body, particle);
}

// private --
// private methods
createCircle(particle) {
const dom = DomUtil.createDiv(
`${particle.id}_dom`,
2 * particle.radius,
2 * particle.radius
);
const dom = DomUtil.createDiv(`${particle.id}_dom`, 2 * particle.radius, 2 * particle.radius);
dom.style.borderRadius = `${particle.radius}px`;

if (this.stroke) {
Expand All @@ -99,11 +81,7 @@ export default class DomRenderer extends BaseRenderer {

createSprite(body, particle) {
const url = typeof body === "string" ? body : body.src;
const dom = DomUtil.createDiv(
`${particle.id}_dom`,
body.width,
body.height
);
const dom = DomUtil.createDiv(`${particle.id}_dom`, body.width, body.height);
dom.style.backgroundImage = `url(${url})`;

return dom;
Expand Down
12 changes: 6 additions & 6 deletions src/render/EaselRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,13 @@ export default class EaselRenderer extends BaseRenderer {
const graphics = this.pool.get(createjs.Graphics);

if (this.stroke) {
if (this.stroke instanceof String) graphics.beginStroke(this.stroke);
else graphics.beginStroke("#000000");
if (this.stroke instanceof String) {
graphics.beginStroke(this.stroke);
} else {
graphics.beginStroke("#000000");
}
}
graphics
.beginFill(particle.color || "#ff0000")
.drawCircle(0, 0, particle.radius);

graphics.beginFill(particle.color || "#ff0000").drawCircle(0, 0, particle.radius);
const shape = this.pool.get(createjs.Shape, [graphics]);

particle.body = shape;
Expand Down

0 comments on commit 6fe846c

Please sign in to comment.