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] 所有版本