artboard

更新时间：2024-10-12 10:50:59

提供可交互的界面，接收用户的笔画输入

子组件

不支持

属性

样式

名称	类型	默认值	必填	描述
default-pen-color	`<color>`	#000	否	画笔颜色
default-pen-size	`<length>`	24px	否	画笔尺寸
width	`<length>` \| `<percentage>`	-	否	组件宽度
height	`<length>` \| `<percentage>`	-	否	组件高度

事件

支持通用事件

名称	参数	描述
changewritepanel	string[]	轨迹点数据，格式为：[x1,y1,x2,y2,...,xn,yn,-1,0,-1,-1]，其中最后四位 -1,0,-1,-1 为笔画结束符

方法

名称	参数	描述
clearData	无	清除轨迹

artboard组件示例

基础用法

<template>
  <stack class="wrapper">
    <artboard
      id="artboard"
      class="artboard"
      onchangewritepanel="changewritepanel"
    ></artboard>
    <text class="placeholder">绘制区域</text>
  </stack>
</template>

<script>
export default {
  changewritepanel(data) {
    console.log('writepanel', data)
  },
  clearData() {
    this.$element('artboard').clearData()
  }
}
</script>

<style>
.wrapper {
  width: 466px;
  height: 466px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #0f2027;
}
.artboard {
  width: 466px;
  height: 466px;
  default-pen-color: #fff;
  default-pen-size: 24px;
  background-color: #2c5364;
  border-radius: 350px;
}
.placeholder {
  font-size: 50px;
  color: #203a43;
  pointer-events: none;
  opacity: 0.5;
}
</style>