Tenon Vue Plugin Canvas

<ex-canvas>

简介

<ex-canvast>是 Tenon 中画布组件，可用于绘制一些自定义图形，如：线段、矩形、圆形、椭圆、图片、文本等，从而实现复杂图形的展示。

属性

• 支持 通用视图属性。Canvas 组件自身相关的属性均是以方法调用的形式来进行设置的

样式

• 支持通用样式，可参考样式介绍

方法

| 方法名 | 参数 | 返回值 | 说明 | | :-------- | :--------:| :------: | :-------:| |lineWidth| (widthValue: number) | void | 设置stroke的线粗细 | |lineColor| (colorHex: number) | void | 设置stroke的线粗细 | |lineCap| (value: number) | void | 设置线头样式 | |lineJoin| (value: number) | void | 设置折线折点样式 | |drawLine| (fraomX : number , fromY : number , toX : number , toY : number) | void | 根据入参，在起始点与终点之间画一条线段 | |strokeRect| (x: number , y: number , w: number , h: number) | void | 画矩形 | |strokeEllipse| (x: number , y: number , trailX: number , trailY: number) | void | 画椭圆 | |strokeCircle| (x: number , y : number , radius: number) | void | 画圆形 | |arc| (x: number , y: number , radius: number , startAngle: number , endAngle:number ,clockwise: boolean) | void | 画弧形 | |fillColor| (colorHex: string) | void | 设置填充颜色 | |fillRect| (x: number, y: number, w: number, h: number) | void | 填充矩形 | |fillEllipse| (x: number, y: number, trailX: number, trailY: number) | void | 填充椭圆 | |fillCircle| (x: number, y: number, radius: number) | void | 填充圆形 | |fontSize| (size: number) | void | 设置绘制文本字号 | |textColor| (colorHex: string) | void | 设置绘制文本字色 | |fillText| (x: number, y: number, maxWidth: number) | void | 绘制文本 | |drawImage| (src: string, x: number, y: number, width: number, height: number) | void | 绘制图片 |

Vue示例

  <ex-canvas ref="canvas"></ex-canvas>