<ex-canvas> ​

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

属性 ​

Canvas 组件自身相关的属性均是以方法调用的形式来进行设置的，详见下面示例部分

样式 ​

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

事件 ​

lineWidth ​

备注：设置stroke的线粗细

参数：@param(widthValue) 粗细值，支持px，hm 单位， 如果不写单位就是dp

lineColor ​

备注：设置stroke的颜色

参数：@param(colorHex) 颜色16进制

lineCap ​

备注：设置线头样式

参数：@param(value) 0:LineCapButt, ， 1:LineCapRound 2:LineCapSquare

lineJoin ​

备注：设置折线折点样式

参数：@param(value) 0:LineJoinMiter, ， 1:LineJoinRound 2:LineJoinBevel

drawLine ​

备注：根据入参，在起始点与终点之间画一条线段

参数：@param(fraomX, fromY, toX, toY)

strokeRect ​

备注：画矩形

参数：@param(x, y, w, h)

strokeEllipse ​

备注：画椭圆

参数：@param(x, y, trailX, trailY)

strokeCircle ​

备注：画圆形

参数：@param(x, y, radius)

arc ​

备注：画弧形

参数：@param(x, y, radius, startAngle, endAngle, clockwise)

fillColor ​

备注：设置填充颜色

参数：@param(colorHex)

fillRect ​

备注：填充矩形

参数：@param(x, y , w, h)

fillEllipse ​

备注：填充椭圆

参数：@param(x, y , trailX, trailY)

fillCircle ​

备注：填充圆形

参数：@param(x, y , raduis)

fontSize ​

备注：设置绘制文本字号

参数：@param(size)

textColor ​

备注：设置绘制文本字色

参数：@param(colorHex)

fillText ​

备注：绘制文本

参数：@param(text, x, y, maxWidth)

drawImage ​

备注：绘制图片

参数：@param(src, x, y, width, height)

示例 ​

Tenon Vue ​

// entry.js
import Tenon from '@hummer/tenon-vue';

import app from './app.vue';
import ExCanvas from '@hummer/vue-plugin-canvas';

Tenon.register(ExCanvas);
Tenon.render(app);

<!-- App.vue -->
<template>
  <ex-canvas class="canvas" ref="canvas"></ex-canvas>
</template>
<style lang="less" scoped>
.canvas{
  width: 750hm;
  height: 1500hm;
  overflow: hidden;
}
</style>
<script>
  export default{
    mounted() {
        this.drawCanvas(parseFloat(Hummer.env.deviceWidth), parseFloat(Hummer.env.deviceHeight),this.$refs.canvas)
    },
    methods: {
      drawCanvas(width, height,canvas) {
        this.drawCircle(width, height, canvas)
      },
      drawCircle(width, height, canvas) {
        canvas.fillCircle('200px', '300px', '50px')
        canvas.strokeCircle(200, 300, 20)
        canvas.arc(300, 300, 20, Math.PI / 4, Math.PI / 5, false)
        canvas.strokeEllipse(100, 400, 300, 500)
        canvas.fillEllipse(100, 600, 300, 700)
      }
    }
  }
</script>

更多用法，可参考Tenon Vue 官方示例。

Tenon React ​

支持中