2021-1-capstone-design1 / MAC_Project1

Go to a project
Toggle navigation Toggle navigation pinning
오윤석
a7e614ce 1 parent 753627b4

Brush, Text 동작 추가

Inline Side-by-side
Showing 7 changed files with 145 additions and 59 deletions
This diff could not be displayed because it is too large.
import ComponentInterface from "./ComponentInterface"
import Color from "./Color"
import ComponentInterface from "./ComponentInterface";
import Color from "./Color";
import { fabric } from "fabric";
class Brush extends ComponentInterface {
constructor(fabricObj) {
super();
this.color = new Color(fabricObj.stroke);
this.paths = fabricObj.path;
this.size = fabricObj.strokeWidth;
}
constructor(fabricObj) {
super(fabricObj.path.length);
this.color = new Color(fabricObj.stroke);
this.paths = fabricObj.path;
this.size = fabricObj.strokeWidth;
this.position = {
top: fabricObj.top,
left: fabricObj.left,
};
}
getCurrentFabricObject() {
const paths = this.paths.filter((_, i) => i < this.state.current);
if (paths.length > 0) {
const popCount = paths[paths.length - 1].length - 3;
for (let i = 0; i < popCount; i++) {
paths[paths.length - 1].pop();
}
paths[paths.length - 1][0] = "L";
}
return new fabric.Path(paths, {
top: this.position.top,
left: this.position.left,
stroke: this.color.getRgba(),
strokeWidth: this.size,
});
}
next() {
return this.addState(10);
}
}
export default Brush
\ No newline at end of file
export default Brush;
......
class Color {
constructor(colorData) {
if(colorData[0] == "#") {
this.r = parseInt(colorData.substring(1, 3), 16)
this.g = parseInt(colorData.substring(3, 5), 16)
this.b = parseInt(colorData.substring(5, 7), 16)
this.a = 1
} else {
const rgba = colorData.substring(5, colorData.length - 1).split(",");
this.r = parseInt(rgba[0]);
this.g = parseInt(rgba[1]);
this.b = parseInt(rgba[2]);
this.a = parseFloat(rgba[3]);
}
}
constructor(colorData) {
if (colorData[0] == "#") {
this.r = parseInt(colorData.substring(1, 3), 16);
this.g = parseInt(colorData.substring(3, 5), 16);
this.b = parseInt(colorData.substring(5, 7), 16);
this.a = 1;
} else {
const rgba = colorData.substring(5, colorData.length - 1).split(",");
this.r = parseInt(rgba[0]);
this.g = parseInt(rgba[1]);
this.b = parseInt(rgba[2]);
this.a = parseFloat(rgba[3]);
}
}
getColorCode() {
return `#${this.r.toString(16)}${this.g.toString(16)}${this.b.toString(
16
)}`;
}
getRgba() {
return `rgba(${this.r},${this.g},${this.b},${this.a})`;
}
}
export default Color;
\ No newline at end of file
export default Color;
......
class ComponentInterface {
constructor(maxState) {
this.state = {
current: 0,
max: maxState,
};
}
getCurrentFabricObject() {}
addState(count = 1) {
if (this.state.current == this.state.max) {
this.state.current++;
} else {
this.state.current = Math.min(this.state.current + count, this.state.max);
}
}
end() {
return this.state.current == this.state.max + 1;
}
}
export default ComponentInterface;
\ No newline at end of file
export default ComponentInterface;
......
import ComponentInterface from "./ComponentInterface"
import Color from "./Color"
import Hangul from "hangul-js"
import ComponentInterface from "./ComponentInterface";
import Color from "./Color";
import Hangul from "hangul-js";
import { fabric } from "fabric";
class Text extends ComponentInterface {
constructor(fabricObj) {
super();
this.color = new Color(fabricObj.fill);
this.text = {
plain:fabricObj.text,
splited:Hangul.disassemble(fabricObj.text)
};
this.position = {
top:fabricObj.top,
left:fabricObj.left
}
this.font = {
size:fabricObj.fontSize,
style:fabricObj.fontStyle,
weight:fabricObj.fontWeight,
family:fabricObj.fontFamily
}
}
constructor(fabricObj) {
const textSplited = Hangul.disassemble(fabricObj.text);
super(textSplited.length);
this.color = new Color(fabricObj.fill);
this.text = {
plain: fabricObj.text,
splited: textSplited,
};
this.position = {
top: fabricObj.top,
left: fabricObj.left,
};
this.font = {
size: fabricObj.fontSize,
style: fabricObj.fontStyle,
weight: fabricObj.fontWeight,
family: fabricObj.fontFamily,
};
}
getCurrentFabricObject() {
return new fabric.Text(
Hangul.assemble(
this.text.splited.filter((_, i) => i < this.state.current)
),
{
top: this.position.top,
left: this.position.left,
fontFamily: this.font.family,
fontSize: this.font.size,
fontWeight: this.font.weight,
fontStyle: this.font.style,
fill: this.color.getColorCode(),
}
);
}
next() {
return this.addState();
}
}
export default Text
\ No newline at end of file
export default Text;
......
import Brush from "./Brush"
import Text from "./Text"
import Brush from "./Brush";
import Text from "./Text";
const Component = {
Brush,
Text
Brush,
Text,
};
export default Component;
\ No newline at end of file
export default Component;
......
import GIF from "gifencoder";
import {fabric} from "fabric"
import { fabric } from "fabric";
import Component from "./components";
class GifGenerator {
......@@ -30,14 +30,21 @@ class GifGenerator {
make() {
const fabricObjs = this.canvas.getObjects();
const objs = [];
fabricObjs.map((fabricObj) => {
if(fabricObj instanceof fabric.Path) {
objs.push(new Component.Brush(fabricObj))
} else if(fabricObj.text !== undefined) {
objs.push(new Component.Text(fabricObj))
if (fabricObj instanceof fabric.Path) {
objs.push(new Component.Brush(fabricObj));
} else if (fabricObj.text !== undefined) {
objs.push(new Component.Text(fabricObj));
}
});
objs.map((obj) => {
while (!obj.end()) {
console.log(obj.getCurrentFabricObject());
obj.next();
}
})
});
console.log(objs);
}
......