82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
import React, { useState, useRef } from 'react';
|
|
import { OdModal } from '@zhst/biz';
|
|
import { CropperImageProps } from '@zhst/meta';
|
|
import { Button } from 'antd';
|
|
|
|
const options = [
|
|
{ value: 1, label: '形体' },
|
|
{ value: 2, label: '非机动车' },
|
|
]
|
|
|
|
const initialODList = [
|
|
{
|
|
"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
|
|
}
|
|
]
|
|
|
|
const demo = () => {
|
|
const odModalRef = useRef(null)
|
|
const [open, setOpen] = useState(true)
|
|
const [scanning, setScanning] = useState(false)
|
|
const [editAble, setEditable] = useState(false)
|
|
const [paintType, setPaintType] = useState<'hand' | 'auto'>('auto')
|
|
const [selectedType, setSelectedType] = useState(1)
|
|
const [odList, setOdList] = useState<CropperImageProps['odList']>(initialODList)
|
|
|
|
return (
|
|
<div style={{ width: '320px' }}>
|
|
<Button onClick={() => setOpen(true)} >打开弹框</Button>
|
|
<OdModal
|
|
ref={odModalRef}
|
|
open={open}
|
|
scanning={scanning}
|
|
title="请选择目标"
|
|
url={'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'}
|
|
odList={odList}
|
|
okText={scanning ? '关闭扫描' : '扫描'}
|
|
onCancel={() => setOpen(false)}
|
|
onOk={() => {
|
|
setScanning(pre => !pre)
|
|
}}
|
|
editAble={editAble}
|
|
selectOptions={options}
|
|
selectedType={selectedType}
|
|
onOdSelect={(id, _shapeData) => console.log('od', id, _shapeData)}
|
|
onAutoSelect={() => {
|
|
setEditable(false)
|
|
setOdList(initialODList)
|
|
setPaintType('auto')
|
|
}}
|
|
onHandSelect={() => {
|
|
setEditable(true)
|
|
setPaintType('hand')
|
|
}}
|
|
showRotateButton={paintType === 'hand'}
|
|
selectTypeDisable={paintType === 'auto'}
|
|
handSelectDisable={paintType === 'hand'}
|
|
autoSelectDisable={paintType === 'auto'}
|
|
onCropEnd={_cropData => console.log('结束绘制：', _cropData)}
|
|
onReset={() => console.log('重置')}
|
|
onRotate={() => console.log('旋转', odModalRef.current?.rotateTo?.(90))}
|
|
onTypeSelect={(val) => {
|
|
setSelectedType(val)
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default demo;
|