0.1.2 • Published 1 year ago
image_scale_drag v0.1.2
image_scale_drag
支持图片放大、缩小、拖拽、选点画线
参数
setPoints: (e: x:number,y:number) => void;
设置点数据
url: string;
设置图片
testZoomKey: number;
设置清除key
lintColor?: string;
设置线颜色
lintThick?: number;
设置线宽
circleColor?: string;
设置点颜色
circleRadius?: number;
设置点半径
传入的宽高已经被去做掉,现在根据外层元素自动计算宽高
其他功能后续添加
示例
import React, { memo, useRef, useState } from "react";
import "./index.less";
import { DotExtract } from "image_scale_drag";
import url from "../assets/images/111.jpg";
type IPoint = {
x: number;
y: number;
};
const Extracts: React.FC = () => {
const [points, setPoints] = useState<IPoint[]>([]);
const [testZoomKey, setTestZoomKey] = useState(0);
const resert = () => {
setTestZoomKey(testZoomKey + 1);
setPoints([]);
};
return (
<div className="wrapper">
<DotExtract setPoints={setPoints} url={url} testZoomKey={testZoomKey} />
<button onClick={resert}>重置</button>
{points.map((el) => {
return (
<span key={el.x}>
x: {el.x} -- y: {el.y}{" "}
</span>
);
})}
</div>
);
};
export default memo(Extracts);