Merge branch 'develop' into feat/cropper-upgrade
# Conflicts: # packages/meta/src/cropperImage/CropperImage.tsx # packages/meta/src/cropperImage/demo/basic.tsx
This commit is contained in:
parent
d80cab2407
commit
37c34eb785
2
.npmrc
2
.npmrc
@ -1,4 +1,4 @@
|
||||
registry="https://registry.npmmirror.com"
|
||||
@zhst:registry="http://10.0.0.77:4874"
|
||||
@zhst:registry="http://10.0.0.77:4874/:autoToken=VbcnvB0eKGAqsT5ZNbfKiw=="
|
||||
strict-peer-dependencies=false
|
||||
ignore-workspace-root-check=true
|
||||
|
||||
@ -2,6 +2,7 @@ import React, { useRef, useState } from 'react';
|
||||
import { AlgorithmConfig, AlgorithmConfigRef } from '@zhst/material';
|
||||
import type { AlgorithmConfigProps } from '@zhst/material';
|
||||
import { Button, Space, Switch } from 'antd';
|
||||
import { CropperImageRefProps } from '@zhst/meta';
|
||||
|
||||
|
||||
const algorithmTableDataSource: any = []
|
||||
@ -47,10 +48,11 @@ const demo = () => {
|
||||
const [tableType, setTableType] = useState<AlgorithmConfigProps['type']>('multiple')
|
||||
const [editAble, setEditAble] = useState(false)
|
||||
const algorithmConfigRef = useRef<AlgorithmConfigRef>(null)
|
||||
const cropperImageRef = useRef<CropperImageRefProps>(null)
|
||||
|
||||
// 绘画事件
|
||||
const handleDraw = (id: any, info: any) => {
|
||||
console.log('箭头圈选事件', id, info)
|
||||
console.log('cropperImageRef', cropperImageRef)
|
||||
setEditAble(true)
|
||||
setCropType('line')
|
||||
}
|
||||
@ -113,6 +115,7 @@ const demo = () => {
|
||||
cropperImageProps={{
|
||||
type: cropType,
|
||||
editAble,
|
||||
ref: cropperImageRef,
|
||||
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -9,7 +9,6 @@ import { Cropper, EVENT_CROP_END, EVENT_CROP_START, EVENT_SHAPE_SELECT } from '.
|
||||
import { Rect } from '../ImageEditor/viewer/shape';
|
||||
import { checkPointInRect, drawArrowLine, getImageDataByPosition, percentToLength } from './cropperImagehelper';
|
||||
import Align from 'rc-align';
|
||||
import { getTransformRect } from '../BigImagePreview/bigImagePreviewHelper';
|
||||
|
||||
interface RectPro extends Rect {
|
||||
imageRect?: string;
|
||||
@ -119,30 +118,6 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
|
||||
// 监听形状选择事件
|
||||
imageRectRef.current = addEventListenerWrapper(imageRef.current, EVENT_SHAPE_SELECT, (e: { detail: any; }) => {
|
||||
// 选中的od
|
||||
<<<<<<< HEAD
|
||||
const id = e.detail;
|
||||
if (id) {
|
||||
// 获取选中的形状
|
||||
// const shapes = imgIns.getSelectShape();
|
||||
|
||||
const selectRectData = odList!.filter(_od => _od.id === id)?.[0] || {}
|
||||
const _data = percentToLength(selectRectData, viewerRef.current.canvas)
|
||||
const imageRect = getImageDataByPosition(
|
||||
{ x: _data.x, y: _data.y, w: _data.w, h: _data.h },
|
||||
{ canvas: viewerRef.current.canvas }
|
||||
)
|
||||
// TODO: 换算成屏幕坐标
|
||||
// const axisRect = imgIns.imgRectAxisToCanvasAxisRect(selectShape);
|
||||
// const rect = {
|
||||
// x: axisRect.x2 > axisRect.x ? axisRect.x : axisRect.x2,
|
||||
// y: axisRect.y2 > axisRect.y ? axisRect.y : axisRect.y2,
|
||||
// w: Math.abs(axisRect.x2 - axisRect.x),
|
||||
// h: Math.abs(axisRect.y2 - axisRect.y),
|
||||
// };
|
||||
// getTransformRect(imageRectRef.current.image, )
|
||||
id && onShapeSelected?.(id, { ..._data, imageRect, originData: selectRectData })
|
||||
}
|
||||
=======
|
||||
const id = e.detail;
|
||||
if (id) {
|
||||
const selectRectData = odList!.filter(_od => _od.id === id)?.[0]
|
||||
@ -153,7 +128,6 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
|
||||
)
|
||||
id && onShapeSelected?.(id, { ..._data, imageRect, originData: selectRectData })
|
||||
}
|
||||
>>>>>>> develop
|
||||
})
|
||||
|
||||
return () => {
|
||||
@ -180,19 +154,11 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
|
||||
})
|
||||
return
|
||||
} else {
|
||||
<<<<<<< HEAD
|
||||
// 编辑模式
|
||||
_viewer?.clearShape?.();
|
||||
|
||||
if (type === 'rect') {
|
||||
// 编辑模式 - 矩形绘制
|
||||
=======
|
||||
// 编辑态
|
||||
const { targetTransform = {} } = _viewer
|
||||
|
||||
if (type === 'rect') {
|
||||
_viewer.clearShape()
|
||||
>>>>>>> develop
|
||||
currentShapeRef.current = initRect()
|
||||
// cropEndRef.current = addEventListenerWrapper(imageRef.current, EVENT_CROP_END, (event: { detail: any; }) => {
|
||||
// const data = event.detail;
|
||||
|
||||
@ -21,7 +21,32 @@ export const getImage = (propImage: HTMLImageElement | string) => {
|
||||
});
|
||||
}
|
||||
|
||||
// 检查是否在规定区域内
|
||||
/**
|
||||
* 检查鼠标是否在矩形中、矩形编辑器上
|
||||
* @param o 鼠标对象实例
|
||||
* @param _fabricCanvas fabric实例
|
||||
* @returns Boolean
|
||||
*/
|
||||
export const checkMouseInRect = (o: fabric.IEvent<MouseEvent>, _fabricCanvas: fabric.Canvas) => {
|
||||
var pointer = _fabricCanvas.getPointer(o.e);
|
||||
var point = new fabric.Point(pointer.x, pointer.y);
|
||||
let inRect = false
|
||||
_fabricCanvas.forEachObject(function(obj) {
|
||||
if (obj.containsPoint(point) || obj._findTargetCorner(pointer)) {
|
||||
inRect = true
|
||||
} else {
|
||||
inRect = false
|
||||
}
|
||||
});
|
||||
return inRect
|
||||
}
|
||||
|
||||
// 检查是否在可绘制区域内
|
||||
/**
|
||||
* @param point 需要检查的点的坐标
|
||||
* @param rect 原始画布宽高：w、h；缩放比例：scale；整体偏移的坐标：translateX,translateY
|
||||
* @returns boolean
|
||||
*/
|
||||
export const checkPointInRect = (point: { x: number; y: number;}, rect: { w: number; h: number, translateX?: number; translateY?: number, scale: number }) => {
|
||||
const { w, h, translateX = 0, translateY = 0, scale = 1 } = rect;
|
||||
const limitStartX = translateX
|
||||
|
||||
@ -36,10 +36,10 @@ export default () => {
|
||||
setOdList([
|
||||
{
|
||||
"id": "456",
|
||||
"x": 0.58543766,
|
||||
"y": 0.3203356,
|
||||
"w": 0.052037954,
|
||||
"h": 0.2664015
|
||||
x: 0.27903386454183265,
|
||||
y: 0.16203125,
|
||||
w: 0.42065405046480747,
|
||||
h: 0.3783333333333333,
|
||||
}
|
||||
])
|
||||
}}>修改坐标</Button>
|
||||
@ -69,12 +69,15 @@ export default () => {
|
||||
}}
|
||||
onCropStart={() => console.log('矩形开始绘制')}
|
||||
onCropEnd={(data) => {
|
||||
console.log('data', data)
|
||||
setSelectedItem({ x: data.left, y: data.top, h: data.height, w: data.width })
|
||||
setImgUrl(data?.imageRect as string)
|
||||
}}
|
||||
selectedItem={selectedItem}
|
||||
showToast={editAble}
|
||||
customToast={() => <div style={{ color: '#fff', fontSize: '24px' }}>多功能框</div>}
|
||||
customToast={() => (
|
||||
<div style={{ marginLeft: '12px', color: '#fff', fontSize: '24px' }}>自定义框</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Image src={imgUrl} />
|
||||
|
||||
@ -12,6 +12,17 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&_toast {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
font-size: 16px;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.canvas-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
@ -6,7 +6,9 @@ toc: content
|
||||
title: RelatedImage 模型碰撞轮播图
|
||||
---
|
||||
|
||||
# RelatedImage 模型碰撞轮播图
|
||||
## RelatedImage 模型碰撞轮播图
|
||||
|
||||
## 示例
|
||||
|
||||
<code src="./demo/basic.tsx">基本</code>
|
||||
<!-- <code src="./demo/noTools.tsx">没有工具栏</code> -->
|
||||
@ -23,3 +25,6 @@ title: RelatedImage 模型碰撞轮播图
|
||||
| onItemSelected | 图片选中 | string | - | |
|
||||
| prefixCls | 图片 | string | - | |
|
||||
|
||||
## 组件设计思路
|
||||
|
||||
功能灵感是出自蜂鸟3.0的人脸碰撞模型的 demo。
|
||||
|
||||
Loading…
Reference in New Issue
Block a user