Drawing with React & React Konva

• 

  BusObject

Inspiration

Game berbasis web yang banyak diantaranya dibuat dengan menggunakan html dan vanilla javascript. Pembuatan Grafik laporan berbasis web, contoh: Bar, Line, Pie Chart. Pembuatan aplikasi photo editor berbasis web.

What it does

Menggambar lebih mudah dengan hadirnya library react-konva yang memudahkan developer react mengintegrasikan aplikasinya dengan component dari react-konva.

How I built it

install library konva & react-konva

NPM

npm i konva
npm i react-konva

OR Yarn

yarn add konva 
yarn add react-konva

Buat Objek Bus dengan menggunakan library react-konva

import React from 'react'
import { Stage, Layer, Group, Rect, Circle } from 'react-konva'

const Bus = ({
    frontWheel,
    rearWheel
}) => {
    return (
        <>
            <Stage
              width={window.innerWidth - 20}
              height={window.innerHeight - 20}
            >
                <Layer>
                    <Group>
                        <Rect
                            x={150}
                            y={20}
                            width={100}
                            height={20}
                            fill="yellow"
                            stroke="black"
                            strokeWidth={1.5}
                        />
                         <Rect
                            x={150}
                            y={40}
                            width={130}
                            height={20}
                            fill="yellow"
                            stroke="black"
                            strokeWidth={1.5}
                        />
                        <Circle
                            x={180}
                            y={65}
                            width={10}
                            height={10}
                            fill="8891AB"
                            radius={12}
                            {...frontWheel}
                        />
                        <Circle
                            x={250}
                            y={65}
                            width={10}
                            height={10}
                            fill="8891AB"
                            radius={12}
                            {...rearWheel}
                        />
                    </Group>
                </Layer>
            </Stage>
        </>
    )
}

export default Bus

Pull Repo

https://github.com/Vendrieou/DrawingWithKonva

NPM

npm install 
npm run start

OR Yarn

yarn install 
yarn start

Challenges I ran into

Penerapan menggambar objek di vanilla javascript dengan di react sangat berbeda apalagi dengan hadirnya library react-konva lebih memudahkan saya dalam penerapan di aplikasi react, karena hanya menggunakan component react-konva saya sudah dapat menggambar object dengan lebih mudah dan rapi pada aplikasi react saya.

Accomplishments that I'm proud of

• Tentu kemudahan interaksi dengan paradigma component pada react.
• Cara menggambar objek degan menggunakan library react-konva.

What I learned

Saya mempelajari cara baru berinteraksi dengan canvas dengan menggunakan library react-konva yang dimana biasanya tag canvas sering digunakan untuk membuat game berbasis web maupun grafik laporan.

Namun dengan adanya library react-konva saya tidak perlu menerapkan vanilla js yang terkadang ribet dan kurang rapi apalagi dipadukan dengan aplikasi react.

What's next for Drawing with React & React Konva

Animasi pada objek react-konva.

Built With

• konva
• react
• react-konva