슬라이더 컴포넌트 추가 및 페이지에 예제 추가
This commit is contained in:
yoosangwook
parent
364d32e349
commit
c102c0592f
@ -1,14 +1,22 @@
|
|||||||
import { useCanvas } from '@/hooks/useCanvas'
|
import { useCanvas } from '@/hooks/useCanvas'
|
||||||
import { useEffect } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { Mode, useMode } from '@/hooks/useMode'
|
import { Mode, useMode } from '@/hooks/useMode'
|
||||||
import QRect from '@/components/fabric/QRect'
|
import QRect from '@/components/fabric/QRect'
|
||||||
import QLine from '@/components/fabric/QLine'
|
import QLine from '@/components/fabric/QLine'
|
||||||
import QPolygon from '@/components/fabric/QPolygon'
|
import QPolygon from '@/components/fabric/QPolygon'
|
||||||
|
import RangeSlider from './ui/RangeSlider'
|
||||||
|
|
||||||
export default function Roof2() {
|
export default function Roof2() {
|
||||||
const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots } =
|
const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots } =
|
||||||
useCanvas('canvas')
|
useCanvas('canvas')
|
||||||
|
|
||||||
|
//canvas 가로 사이즈
|
||||||
|
const [verticalSize, setVerticalSize] = useState(0)
|
||||||
|
//canvas 세로 사이즈
|
||||||
|
const [horizontalSize, setHorizontalSize] = useState(0)
|
||||||
|
// 글자크기
|
||||||
|
const [fontSize, setFontSize] = useState(0)
|
||||||
|
|
||||||
const {
|
const {
|
||||||
mode,
|
mode,
|
||||||
changeMode,
|
changeMode,
|
||||||
@ -76,109 +84,146 @@ export default function Roof2() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{canvas && (
|
{canvas && (
|
||||||
<div className="flex justify-center my-8">
|
<>
|
||||||
<button
|
<div className="flex justify-center my-8">
|
||||||
className={`w-30 mx-2 p-2 rounded ${mode === Mode.DEFAULT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
|
<button
|
||||||
onClick={() => changeMode(canvas, Mode.DEFAULT)}
|
className={`w-30 mx-2 p-2 rounded ${
|
||||||
>
|
mode === Mode.DEFAULT ? 'bg-blue-500' : 'bg-gray-500'
|
||||||
모드 DEFAULT
|
} text-white`}
|
||||||
</button>
|
onClick={() => changeMode(canvas, Mode.DEFAULT)}
|
||||||
<button
|
>
|
||||||
className={`w-30 mx-2 p-2 rounded ${mode === Mode.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
|
모드 DEFAULT
|
||||||
onClick={() => changeMode(canvas, Mode.DRAW_LINE)}
|
</button>
|
||||||
>
|
<button
|
||||||
기준선 긋기 모드
|
className={`w-30 mx-2 p-2 rounded ${
|
||||||
</button>
|
mode === Mode.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500'
|
||||||
<button
|
} text-white`}
|
||||||
className={`w-30 mx-2 p-2 rounded ${mode === Mode.EDIT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
|
onClick={() => changeMode(canvas, Mode.DRAW_LINE)}
|
||||||
onClick={() => changeMode(canvas, Mode.EDIT)}
|
>
|
||||||
>
|
기준선 긋기 모드
|
||||||
에디팅모드
|
</button>
|
||||||
</button>
|
<button
|
||||||
<button
|
className={`w-30 mx-2 p-2 rounded ${
|
||||||
className={`w-30 mx-2 p-2 rounded ${mode === Mode.TEMPLATE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
|
mode === Mode.EDIT ? 'bg-blue-500' : 'bg-gray-500'
|
||||||
onClick={() => changeMode(canvas, Mode.TEMPLATE)}
|
} text-white`}
|
||||||
>
|
onClick={() => changeMode(canvas, Mode.EDIT)}
|
||||||
템플릿
|
>
|
||||||
</button>
|
에디팅모드
|
||||||
<button
|
</button>
|
||||||
className={`w-30 mx-2 p-2 rounded ${mode === Mode.TEXTBOX ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
|
<button
|
||||||
onClick={() => changeMode(canvas, Mode.TEXTBOX)}
|
className={`w-30 mx-2 p-2 rounded ${
|
||||||
>
|
mode === Mode.TEMPLATE ? 'bg-blue-500' : 'bg-gray-500'
|
||||||
텍스트박스 모드
|
} text-white`}
|
||||||
</button>
|
onClick={() => changeMode(canvas, Mode.TEMPLATE)}
|
||||||
<button
|
>
|
||||||
className={`w-30 mx-2 p-2 rounded ${mode === Mode.DRAW_RECT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
|
템플릿
|
||||||
onClick={() => changeMode(canvas, Mode.DRAW_RECT)}
|
</button>
|
||||||
>
|
<button
|
||||||
사각형 생성 모드
|
className={`w-30 mx-2 p-2 rounded ${
|
||||||
</button>
|
mode === Mode.TEXTBOX ? 'bg-blue-500' : 'bg-gray-500'
|
||||||
<button
|
} text-white`}
|
||||||
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
onClick={() => changeMode(canvas, Mode.TEXTBOX)}
|
||||||
onClick={handleUndo}
|
>
|
||||||
>
|
텍스트박스 모드
|
||||||
Undo
|
</button>
|
||||||
</button>
|
<button
|
||||||
<button
|
className={`w-30 mx-2 p-2 rounded ${
|
||||||
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
mode === Mode.DRAW_RECT ? 'bg-blue-500' : 'bg-gray-500'
|
||||||
onClick={handleRedo}
|
} text-white`}
|
||||||
>
|
onClick={() => changeMode(canvas, Mode.DRAW_RECT)}
|
||||||
Redo
|
>
|
||||||
</button>
|
사각형 생성 모드
|
||||||
<button
|
</button>
|
||||||
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
<button
|
||||||
onClick={handleClear}
|
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
||||||
>
|
onClick={handleUndo}
|
||||||
clear
|
>
|
||||||
</button>
|
Undo
|
||||||
<button
|
</button>
|
||||||
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
<button
|
||||||
onClick={zoomIn}
|
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
||||||
>
|
onClick={handleRedo}
|
||||||
확대
|
>
|
||||||
</button>
|
Redo
|
||||||
<button
|
</button>
|
||||||
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
<button
|
||||||
onClick={zoomOut}
|
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
||||||
>
|
onClick={handleClear}
|
||||||
축소
|
>
|
||||||
</button>
|
clear
|
||||||
현재 줌 : {zoom}%
|
</button>
|
||||||
<button
|
<button
|
||||||
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
||||||
onClick={makeRect}
|
onClick={zoomIn}
|
||||||
>
|
>
|
||||||
사각형만들기
|
확대
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
||||||
onClick={makeLine}
|
onClick={zoomOut}
|
||||||
>
|
>
|
||||||
선 추가
|
축소
|
||||||
</button>
|
</button>
|
||||||
<button
|
현재 줌 : {zoom}%
|
||||||
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
<button
|
||||||
onClick={makePolygon}
|
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
||||||
>
|
onClick={makeRect}
|
||||||
다각형 추가
|
>
|
||||||
</button>
|
사각형만들기
|
||||||
<button
|
</button>
|
||||||
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
<button
|
||||||
onClick={() => {
|
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
||||||
setCanvasBackgroundWithDots(canvas, 10)
|
onClick={makeLine}
|
||||||
}}
|
>
|
||||||
>
|
선 추가
|
||||||
점선 추가
|
</button>
|
||||||
</button>
|
<button
|
||||||
<button
|
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
||||||
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
onClick={makePolygon}
|
||||||
onClick={() => {
|
>
|
||||||
setCanvasBackgroundWithDots(canvas, 20)
|
다각형 추가
|
||||||
}}
|
</button>
|
||||||
>
|
<button
|
||||||
점선 추가
|
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
||||||
</button>
|
onClick={() => {
|
||||||
</div>
|
setCanvasBackgroundWithDots(canvas, 10)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
점선 추가
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
|
||||||
|
onClick={() => {
|
||||||
|
setCanvasBackgroundWithDots(canvas, 20)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
점선 추가
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-center flex-col items-center">
|
||||||
|
<div className="m-2 p-2 w-80">
|
||||||
|
<RangeSlider
|
||||||
|
title="canvas 가로 사이즈"
|
||||||
|
initValue={verticalSize}
|
||||||
|
onchange={setVerticalSize}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="m-2 p-2 w-80">
|
||||||
|
<RangeSlider
|
||||||
|
title="canvas 세로 사이즈"
|
||||||
|
initValue={horizontalSize}
|
||||||
|
onchange={setHorizontalSize}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="m-2 p-2 w-80">
|
||||||
|
<RangeSlider
|
||||||
|
title="글자 크기"
|
||||||
|
initValue={fontSize}
|
||||||
|
onchange={setFontSize}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|||||||
25
src/components/ui/RangeSlider.jsx
Normal file
25
src/components/ui/RangeSlider.jsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
export default function RangeSlider(
|
||||||
|
props = { title: 'default title', initValue: 0, onchange: () => {} },
|
||||||
|
) {
|
||||||
|
const { title, initValue, onchange } = props
|
||||||
|
|
||||||
|
const handleChange = (e) => {
|
||||||
|
console.log(e.target.value)
|
||||||
|
onchange(e.target.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<label htmlFor="default-range" className="block mb-2 text-gray-900">
|
||||||
|
{title}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="default-range"
|
||||||
|
type="range"
|
||||||
|
value={initValue}
|
||||||
|
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user