场景设计器

基于 vue3.2 和 typescript 的场景设计器

如何使用

# 安装依赖
yarn install ahmux-scene-design

import SceneDesign from 'ahmux-scene-design'

// 全局使用请用 Vue.use
Vue.use(SceneDesign)

<!-- 组件使用 -->
<scene-design ref="designRef" :shapes="shapes"></scene-design>

属性说明 id 为生成canvas的ID width 画布宽度 height画布高度 background画布背景色 shapes 为场景中的形状，格式为json字符串，可通过toJson方法获取 mouseListening 是否监听鼠标事件，默认为true,当为false时，鼠标事件不会触发

interface Props {
  id?: string,
  width?: number,
  height?: number,
  background?: string,
  shapes?: string,
  mouseListening?: boolean
}

方法说明

// 清除画布
clear()
// 撤销
revoke()
// 强制渲染
forceReDraw()
// 转换配置成json
toJson()
// 根据id获取形状
getShapeById(id)
// 获取图片
getImage()
// 根据类型获取图片
getImageByType(type)
// 添加形状 shape 为shape 类型
addShape(shape)
// 预添加形状，添加完毕后，可使用ctrl+鼠标 确定形状的初始位置
preAddShape(shapeProp)
//根据ID编辑对应的形状
editById(id, prop)
// 根据ID删除对应的详情
removeById()

内嵌类型

目前内置了以下类型,详细请参见类型定义，可根据需要自行扩展

Circle:圆形
Rectangle:矩形
TextShape:文字
DefenseArea:直角防区,不推荐使用
MultiDefenseArea:曲线防区
ImageShape：图片

对应数据结构如下

export interface ShapeProps {

}

export interface BaseShapeProps extends ShapeProps {
  id?: string;
  cloneId?: string;
  type?: string;
}

export interface RectangleProps extends BaseShapeProps {
  startX: number;
  startY: number;
  endX: number;
  endY: number;
  strokeWidth?: number;
  strokeColor?: string;
  fillColor?: string;
}

export interface CircleProps extends BaseShapeProps {
  x: number;
  y: number;
  radius: number;
  strokeWidth?: number;
  strokeColor?: string;
  fillColor?: string;
}

export interface DefenseAreaProps extends RectangleProps {
  markDistance: number;
  height: number;

}

export interface MultiDefenseAreaProps extends BaseShapeProps {
  points: Point[];

  height: number;
  strokeWidth?: number;
  strokeColor?: string;
  fillColor?: string;
}


export interface ImageShapeProps extends BaseShapeProps {
  x: number;
  y: number;
  height?: number;
  width?: number;
  url: string;
  fillColor?: string;
  strokeColor?: string;
}


export interface TextShapeProps extends BaseShapeProps {
  x: number;
  y: number;
  fontSize: number;
  fontFamily?: string;
  text: string;
  fillColor: string;
  maxWidth?: number;
  textAlign?: CanvasTextAlign;
  textBaseline?: CanvasTextBaseline;
  direction?: CanvasDirection;
}