canvas 라이브러리 Fabric Demo

http://fabricjs.com/

Fabric.js Javascript Canvas Library

이구 

저는 사각형 원, 색 변경, 텍스트 추가를 하는 코드를 간단하게 구현해 봤습니다.

 

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를 써도 됩니다

그리고 텍스트에 값을 넣고 추가하면 텍스트에 넣은 값이 생성됩니다!