Fabric.js Javascript Canvas Library
Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes or complex shapes consisting of hundreds or thousands of simple paths or good old images You can add text and dynamically manipulate its size, alignment,
fabricjs.com
이구
저는 사각형 원, 색 변경, 텍스트 추가를 하는 코드를 간단하게 구현해 봤습니다.
import React, { Component, ReactDOM } from 'react';
import {fabric} from 'fabric';
class Fabrictest extends Component {
width;
height;
canvas;
text;
fill;
state = {
winheight: 0,
winwidth: 0
}
componentDidMount = () => {
this.canvas = this.__canvas = new fabric.Canvas('c');
// create a rectangle object
var rect = new fabric.Rect({
width: 100,
height: 100
});
// this.canvas.add(rect);
}
addRect = () => {
var rect = new fabric.Rect({
width: 200,
height: 200
});
this.canvas.add(rect);
}
onChange = (e, key) => {
if(key === "text") {
console.log('a');
this.text = e.target.value;
}
else if (key === "fill") {
this.fill = e.target.value;
}
}
addCircle = () => {
var rect = new fabric.Circle({
width: 500,
height: 500,
radius: 50
});
this.canvas.add(rect);
}
addText = () => {
var rect = new fabric.IText( this.text, {
width: 500,
height: 500,
fill: this.fill
});
this.canvas.add(rect);
}
deleteObject = function() {
this.canvas.getActiveObject().remove();
}
render() {
return (
<div>
{/* <input type="text" name="width" onChange={(e) => this.onChange(e, "width")}/>
<input type="text" name="height" onChange={(e) => this.onChange(e, "height")}/> */}
<button onClick={this.addRect}>사각형</button><br />
<button onClick={this.addCircle}>원</button><br />
<input type="text" name="fill" onChange={(e) => this.onChange(e, "fill")}/>
<button onClick={this.addfill}>색 변경 </button> <br />
<input type="text" name="text" onChange={(e) => this.onChange(e, "text")}/>
<button onClick={this.addText}>텍스트 추가 </button> <br />
<canvas id="c" width= "1000" height= "1000" />
</div>
);
}
}
export default Fabrictest;
결과값은
이렇게 색상도 바꿀 수 있고 원을 클릭 시 원이 생성되고 사각형을 클릭 시 사각형이 클릭됩니다.
색상은 #FFFFFF를 써도 상관없고 영어로 RED,YELLOW를 써도 됩니다
그리고 텍스트에 값을 넣고 추가하면 텍스트에 넣은 값이 생성됩니다!
'React' 카테고리의 다른 글
| react animation? (0) | 2021.04.22 |
|---|---|
| React Styled Component에 대해 알아보자! (0) | 2019.10.07 |
| CORS 란?! (0) | 2019.09.16 |
| React Library 모음 (0) | 2019.09.05 |
| React는 알고 코딩해야지 ! (0) | 2019.09.04 |
