97 lines
2.8 KiB
TypeScript
97 lines
2.8 KiB
TypeScript
|
|
import React, { useRef, useState } from 'react';
|
|
import { CropperImage } from '@zhst/meta'
|
|
import { Button, Space, Image } from 'antd';
|
|
|
|
export default () => {
|
|
const [type, setType] = useState<'rect' | 'line'>('line')
|
|
const [editAble, setEditAble] = useState(false)
|
|
const cropperRef = useRef(null)
|
|
const [imgUrl, setImgUrl] = useState('')
|
|
const [odList, setOdList] = useState([
|
|
{
|
|
"id": "123",
|
|
"x": 0.5519352,
|
|
"y": 0.2965385,
|
|
"w": 0.05185461,
|
|
"h": 0.24698898,
|
|
selectAble: false,
|
|
},
|
|
{
|
|
"id": "456",
|
|
"x": 0.58543766,
|
|
"y": 0.3203356,
|
|
"w": 0.052037954,
|
|
"h": 0.2664015
|
|
},
|
|
{
|
|
"id": "46",
|
|
type: 'line',
|
|
"x": 0.18543766,
|
|
"y": 0.1203356,
|
|
"w": 0.62037954,
|
|
"h": 0.5864015,
|
|
"x2": 0.62037954,
|
|
"y2": 0.5864015
|
|
}
|
|
])
|
|
const [selectedItem, setSelectedItem] = useState<any>()
|
|
|
|
return (
|
|
<Space direction='vertical'>
|
|
<Space>
|
|
<Button onClick={() => setType('line')}>箭头模式</Button>
|
|
<Button onClick={() => setType('rect')}>矩形框选</Button>
|
|
<Button onClick={() => {
|
|
setOdList([
|
|
{
|
|
"id": "456",
|
|
x: 0.27903386454183265,
|
|
y: 0.16203125,
|
|
w: 0.42065405046480747,
|
|
h: 0.3783333333333333,
|
|
}
|
|
])
|
|
}}>修改坐标</Button>
|
|
<Button onClick={() => setEditAble(pre => !pre)}>{!editAble ? '不可编辑' : '可编辑'}</Button>
|
|
<Button
|
|
onClick={() => {
|
|
cropperRef?.current.rotateTo(90)
|
|
}}
|
|
>旋转</Button>
|
|
<Button
|
|
onClick={() => {
|
|
cropperRef?.current.clearShape()
|
|
}}
|
|
>清空</Button>
|
|
</Space>
|
|
<div style={{ width: 800, height: 600 }}>
|
|
<CropperImage
|
|
ref={cropperRef}
|
|
type={type}
|
|
odList={odList}
|
|
editAble={editAble}
|
|
url="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
|
onMouseUp={data => console.log('箭头绘制结束：', data)}
|
|
onShapeSelected={(id, shapeData) => {
|
|
console.log('shapeData', shapeData)
|
|
setImgUrl(shapeData?.imageRect as string)
|
|
}}
|
|
onCropStart={() => console.log('矩形开始绘制')}
|
|
onCropEnd={(data) => {
|
|
console.log('绘制完成', data)
|
|
setSelectedItem({ x: data.left, y: data.top, h: data.height, w: data.width })
|
|
setImgUrl(data?.rectImageBase64 as string)
|
|
}}
|
|
selectedItem={selectedItem}
|
|
showToast={editAble}
|
|
customToast={() => (
|
|
<div style={{ marginLeft: '12px', color: '#fff', fontSize: '24px' }}><Button>自定义DOM</Button></div>
|
|
)}
|
|
/>
|
|
</div>
|
|
{imgUrl && <Image src={imgUrl} />}
|
|
</Space>
|
|
)
|
|
}
|