组件：画板

画板组件用于进行2D绘图操作，支持画矩形、填充矩形、画圆、填充圆、画曲线、填充曲线、填充文本、画文本、画直线、画多边形、填充多边形、画图像、清空、保存状态、恢复状态、旋转、平移、缩放等操作，常用于图形绘制、图表展示、Canvas 绘图等场景，坐标原点为左上角。

典型使用场景：

图表绘制（柱状图、折线图、饼图、散点图）
图形设计（几何图形、流程图、架构图、示意图）
游戏开发（游戏界面、动画效果、交互绘图）
数据可视化（数据图表、统计图表、信息图表）
创意绘图（涂鸦板、手绘板、绘画工具）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作	属性/方法	示例
画矩形	`画矩形(左, 上, 右, 下)`	`画板1.画矩形(10, 10, 100, 100)`
填充矩形	`填充矩形(左, 上, 右, 下)`	`画板1.填充矩形(10, 10, 100, 100)`
画圆	`画圆(圆心X, 圆心Y, 半径)`	`画板1.画圆(50, 50, 30)`
填充圆	`填充圆(圆心X, 圆心Y, 半径)`	`画板1.填充圆(50, 50, 30)`
画直线	`画直线(起点X, 起点Y, 终点X, 终点Y)`	`画板1.画直线(10, 10, 100, 100)`
画文本	`画文本(文本, X, Y)`	`画板1.画文本("Hello", 10, 10)`
填充文本	`填充文本(文本, X, Y)`	`画板1.填充文本("Hello", 10, 10)`
清空画板	`清空()`	`画板1.清空()`
保存状态	`保存状态()`	`画板1.保存状态()`
恢复状态	`恢复状态()`	`画板1.恢复状态()`
设置绘图样式	`设置线条样式(宽度, 颜色, 线条样式)`	`画板1.设置线条样式(2, "#1890ff", "实线")`

样式美化参考

绘图样式变体：

实线样式：线条样式 = "实线"，线条宽度 = 2，线条颜色 = "#1890ff"
虚线样式：线条样式 = "虚线"，线条宽度 = 2，线条颜色 = "#1890ff"，虚线模式 = "5,5"
点线样式：线条样式 = "点线"，线条宽度 = 2，线条颜色 = "#1890ff"，虚线模式 = "2,2"
双线样式：线条样式 = "双线"，线条宽度 = 4，线条颜色 = "#1890ff"，内线颜色 = "#ffffff"

填充样式：

纯色填充：填充颜色 = "#1890ff"，`填充透明度 = 1
渐变填充：填充类型 = "线性渐变"，渐变颜色 = ["#1890ff", "#096dd9"]，渐变方向 = "水平"
图案填充：填充类型 = "图案"，图案图像 = "static/pattern.png"，图案重复 = "重复"
透明填充：填充颜色 = "透明"，`填充透明度 = 0

字体样式：

默认字体：字体 = "Arial"，字体大小 = 16，字体颜色 = "#333333"
粗体字体：字体 = "Arial"，字体大小 = 16，字体粗细 = "粗体"，字体颜色 = "#333333"
斜体字体：字体 = "Arial"，字体大小 = 16，字体样式 = "斜体"，字体颜色 = "#333333"
中文字体：字体 = "微软雅黑"，字体大小 = 16，字体颜色 = "#333333"

画布样式：

白色背景：背景颜色 = "#ffffff"，边框 = "1px solid #d9d9d9"，边框圆角 = "4px"
灰色背景：背景颜色 = "#f5f5f5"，边框 = "1px solid #e8e8e8"，边框圆角 = "4px"
网格背景：背景图像 = "static/grid.png"，背景重复 = "重复"，边框 = "1px solid #e8e8e8"，边框圆角 = "4px"

状态样式：

正常状态：边框 = "1px solid #d9d9d9"，背景颜色 = "#ffffff"，光标样式 = "crosshair"
悬停状态：边框 = "1px solid #1890ff"，背景颜色 = "#f0f7ff"，光标样式 = "crosshair"
绘制状态：边框 = "2px solid #1890ff"，背景颜色 = "#ffffff"，光标样式 = "crosshair"
错误状态：边框 = "1px solid #ff4d4f"，背景颜色 = "#fff2f0"，光标样式 = "not-allowed"

尺寸样式：

小尺寸画板：宽度 = 300，高度 = 200，边框圆角 = "4px"，边框 = "1px solid #d9d9d9"
中尺寸画板：宽度 = 600，高度 = 400，边框圆角 = "8px"，边框 = "1px solid #e8e8e8"
大尺寸画板：宽度 = 800，高度 = 600，边框圆角 = "12px"，边框 = "1px solid #e8e8e8"
全屏画板：宽度 = "100%"，高度 = "100%"，边框 = "none"，边框圆角 = "0"

响应式样式：

移动端适配：宽度 = "100%"，高度 = 300，最大宽度 = 400，边框圆角 = "4px"
平板端适配：宽度 = "100%"，高度 = 400，最大宽度 = 600，边框圆角 = "8px"
桌面端适配：宽度 = 800，高度 = 600，边框圆角 = "12px"，边框 = "1px solid #e8e8e8"

示例代码

' 示例：完整的画板使用演示
' 1. 创建画板
变量 画板1 = 创建 画板()
' 2. 设置属性
画板1.左边 = 100
画板1.顶边 = 100
画板1.宽度 = 400
画板1.高度 = 300
画板1.置画布尺寸(400, 300)
画板1.填充样式 = "#1890ff"
画板1.画笔样式 = "#333333"
画板1.线宽 = 2
' 3. 绘制图形
画板1.填充矩形(20, 20, 120, 80)
画板1.画矩形(160, 20, 120, 80)
画板1.填充圆(80, 200, 40)
画板1.画直线(160, 160, 360, 260)
画板1.字体 = "20px Arial"
画板1.填充文本("Hello VcnStudio", 200, 200)
' 4. 添加到父容器
添加组件(画板1)

属性：填充样式

类型： 文本型
说明： 设置或获取绘图时的填充颜色或样式，如颜色值、渐变等，用于填充图形内部。

属性：画笔样式

类型： 文本型
说明： 设置或获取绘图时的笔触颜色或样式，如颜色值、渐变等，用于绘制图形的边框。

属性：字体

类型： 文本型
说明： 设置或获取绘图时文本的字体样式，如字体大小、字体名称等,1. 设置字体大小和名称：画板对象1.字体 = "20px Arial";2. 设置斜体和粗体：画板对象1.字体 = "italic bold 16px Times New Roman"。

属性：线宽

类型： 数值型
说明： 设置绘图时线条的宽度，单位为像素。

属性：线端盖样式

类型： 文本型
说明： 设置线条末端的样式，可选值：butt（默认）、round、square。

属性：线连接样式

类型： 文本型
说明： 设置两条线段连接处的样式，可选值：miter（默认）、round、bevel。

函数：置画布尺寸(宽度, 高度)

设置画板中可绘制内容的区域尺寸，一般建议设置为与画板宽高一致。

函数：画矩形(X, Y, 宽, 高)

在画布上指定位置 (x, y) 绘制一个指定宽高的矩形（框），边框颜色由画笔样式决定。

' 绘制一个矩形，在坐标 (10, 10) 绘制一个宽为 100，高为 50 的矩形。
画板1.画矩形(10, 10, 100, 50)

函数：填充矩形(X, Y, 宽, 高)

填充绘制画布中指定位置和宽高的矩形，相当于是绘制一个含有底色的矩形区域。

' 填充一个矩形，在坐标 (10, 10) 绘制一个宽为 100，高为 50 的矩形。
画板1.填充矩形(10, 10, 100, 50)

函数：画圆(X, Y, 半径)

在画布上指定位置 (X, Y) 绘制一个圆形。

' 绘制一个圆形，在坐标 (50, 50) 绘制一个半径为 30 的圆
画板1.画圆(50, 50, 30)

函数：填充圆(X, Y, 半径)

在画布上指定位置 (X, Y) 绘制一个填充有背景底色的圆，填充颜色由填充样式决定。

' 填充一个圆形，在坐标 (50, 50) 绘制一个半径为 30 的圆
画板1.填充圆(50, 50, 30)

函数：画曲线(X, Y, 半径, 开始角度, 结束角度)

在画布上指定位置 (X, Y) 绘制一个圆形或圆弧的边框，边框颜色由画笔样式决定，开始角度与结束角度单位为弧度制，0为0度，90度为0.5PI，180度为1PI，270度为1.5PI。

' 绘制一个扇形，在坐标 (50, 50) 绘制一个半径为 30 的扇形，起始角度为 0，结束角度为 0.5PI。
画板1.画曲线(50, 50, 30, 0, 0.5 * 3.14)

函数：填充曲线(X, Y, 半径, 开始角度, 结束角度)

在画布上指定位置 (X, Y) 填充一个圆形或圆弧，填充颜色由填充样式决定，开始角度与结束角度单位为弧度制，0为0度，90度为0.5PI，180度为1PI，270度为1.5PI。

' 填充一个扇形，在坐标 (50, 50) 填充一个半径为 30 的扇形，起始角度为 0，结束角度为 0.5PI。
画板1.填充曲线(50, 50, 30, 0, 0.5 * 3.14)

函数：画文本(文本内容, X, Y)

在画布上指定位置 (X, Y) 绘制文本的边框（字体镂空效果），边框颜色由画笔样式决定。

' 绘制一个文本，在坐标 (50, 50) 绘制一个文本 "Hello VcnStudio"。
画板1.画文本("Hello VcnStudio", 50, 50)

函数：填充文本(文本内容, X, Y)

在画布上指定位置 (X, Y) 绘制填充的文本，填充颜色由填充样式决定。

' 填充一个文本，在坐标 (50, 50) 绘制一个文本 "Hello VcnStudio"。
画板1.填充文本("Hello VcnStudio", 50, 50)

函数：画直线(X1, Y1, X2, Y2)

在画布上从点 (X1, Y1) 到点 (X2, Y2) 绘制一条直线，线条样式由画笔样式决定。

' 绘制一条直线，从坐标 (10, 10) 到坐标 (100, 100)。
画板1.画直线(10, 10, 100, 100)

函数：画多边形(坐标点数组)

在画布上绘制一个多边形，参数值为包含各顶点坐标的数组，格式为 [{X, Y}, ...]。

' 绘制一个五边形，在坐标 (50, 50) 绘制一个五边形，边长为 50。
画板1.画多边形([{50, 50}, {100, 50}, {150, 100}, {100, 150}, {50, 100}])

函数：填充多边形(坐标点数组)

在画布上绘制并填充一个多边形，参数值为包含各顶点坐标的数组，格式为 [{X, Y}, ...]。

' 填充一个五边形，在坐标 (50, 50) 填充一个五边形，边长为 50。
画板1.填充多边形([{50, 50}, {100, 50}, {150, 100}, {100, 150}, {50, 100}])

函数：画图像(图片地址, X, Y, 宽度, 高度)

在画布上指定位置 (X, Y) 绘制图像。

' 绘制一张图片，在坐标 (50, 50) 绘制一张图片，图片大小为 100 * 100。
画板1.画图像("static/img1.png", 50, 50, 100, 100)

轻语言网站开发SDK文档