ray-sketch-board
Usage
import SketchBoard from 'ray-sketch-board';
<SketchBoard
lang={lang}
thick={thick}
scale={scale}
width={1024 - thick}
height={768 - thick}
startX={startX}
startY={startY}
shadow={shadow}
hLines={h}
vLines={v}
onLineChange={this.handleLineChange}
cornerActive={cornerActive}
onCornerClick={this.handleCornerClick}
rulerOption={rulerOption}
// 右键菜单props
enableCtxMenu
onRulerVisibleChange={this.handleRulerVisibleChange}
guideLineVisible={guideLineVisible}
onGuideLineVisibleChange={this.handleGuideLineVisibleChange}
/>
props
SketchBoard.propTypes = {
prefixCls: PropTypes.string,
className: PropTypes.string,
// 画板缩放值
scale: PropTypes.number,
// 当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率
ratio: PropTypes.number,
// 标尺厚度,水平标尺表示 height,垂直标尺表示 width
thick: PropTypes.number,
// 标尺的宽度,水平标尺 canvas 的宽度值
width: PropTypes.number,
// 标尺的高度,垂直标尺 canvas 的高度值
height: PropTypes.number,
// 标尺的起点坐标值 x 坐标,用于水平标尺
startX: PropTypes.number,
// 标尺的起点坐标值 x 坐标,用于垂直标尺
startY: PropTypes.number,
/** 阴影区域配置信息, 水平标尺 x 与 width, 垂直标尺 y 与 height */
shadow: PropTypes.shape({
x: PropTypes.number,
y: PropTypes.number,
width: PropTypes.number,
height: PropTypes.number
}),
// 水平标尺上添加的 line, 表现为垂直线
hLines: PropTypes.array,
// 垂直标尺上添加的 line,表现为水平线
vLines: PropTypes.array,
// guide line 变化回调
onLineChange: PropTypes.func,
/** 拐角选中状态 */
cornerActive: PropTypes.bool,
/** 拐角点击事件回调 */
onCornerClick: PropTypes.func,
/** 国际化配置,内置 zh 和 en */
lang: PropTypes.oneOf(['zh-CN', 'en']),
// 启用右键菜单
enableCtxMenu: PropTypes.bool,
/**
* ruler 显隐切换回调
*/
onRulerVisibleChange: PropTypes.func,
/**
* 是否显示 guide line
*/
guideLineVisible: PropTypes.bool,
/**
* guide line 显隐切换回调
*/
onGuideLineVisibleChange: PropTypes.func,
// 标尺配置信息, 仅在初始化时起效
rulerOption: PropTypes.shape({
/** 刻度标尺背景色 */
bgColor: PropTypes.string,
/** 刻度尺长线颜色 */
longfgColor: PropTypes.string,
/** 刻度尺短线颜色 */
shortfgColor: PropTypes.string,
/** 标尺字体颜色 */
fontColor: PropTypes.string,
/** 刻度尺阴影部分颜色 */
shadowColor: PropTypes.string,
LINE_SIZE: sizeMappingPropTypes
})
};
changelog
v1.1.0
去除低版本 react 相关方法,支持 [email protected]
所有版本