canvas

组件演示

axml

<div class="warpper">
  <x-nav-bar showArrow="{{true}}" title="Canvas"></x-nav-bar>
  <div class="container">
    <div class="flex buttons">
      <div class="button" onTap="line">画线</div>
      <div class="button" onTap="round">画圆</div>
      <div class="button" onTap="drop">画点</div>
      <div class="button" onTap="strokeRect">画矩形框</div>
      <div class="button" onTap="reac">画填充矩形</div>
      <!-- <div class="button" onTap="createLinearGradient">线性渐变</div> -->
      <!-- <div class="button" onTap="drawImage">绘制图片</div> -->
      <div class="button" onTap="bezierCurveTo">绘制二次曲线</div>
      <div class="button" onTap="fillText">文本</div>
      <!-- <div class="button" onTap="measureText">获取文本宽度</div> -->
      <div class="button" onTap="clear">清除画布</div>
    </div>
    <!-- <div class="tip">
      <div class="flex">measureText(文本宽度)：<text class="text">{{measureText}}</text></div>
    </div> -->
    <div class="canvas-box">
      <canvas id="canvasx" class="canvas"></canvas>
    </div>
    <image mode="scaleToFill" src="{{src}}" />
  </div>
</div>

css

.warpper {
  background-color:white;
  width:100%;
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container{
  flex: 1;
  color: #999;
  font-size: 16rpx;
  width: 100%;
  line-height: 30rpx;
}
.flex{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.buttons{
  padding-left: 20rpx;
  padding-right: 20rpx;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid darkgoldenrod;
}
.button{
  margin-bottom: 10rpx;
  margin-right: 20rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  border-radius: 8rpx;
  background-color: #ccc;
  color: #fff;
}
.tip{
  margin-bottom: 20rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-bottom: 20rpx;
  background-color: #25b864;
  color: #fff;
}
.text{
  color: red;
}
.canvas-box{
  border: 1rpx solid red;
  overflow: hidden;
}
.canvas{
  margin-left: 25vw;
  width: 40vw;
  height: 40vh;
}

ts

import { JSON, JSONObject } from "waft-json";
import { console, getDataSource, Page, Props, CanvasContext, MessageEvent, CanvasElement, document, Event, TouchEvent } from "waft";

let _this: Index;
export class Index extends Page {
  constructor(props: Props){
    super(props);
    _this = this;
    // 设置默认的state
    this.setState(getDataSource());

    // 画线
    this.addEventListener('line', () => {
      // 获取canvas对象
      const element = document.querySelector("#canvasx") as CanvasElement;
      const ctx:CanvasContext = element.getContext();      
      ctx.beginPath();
      ctx.setLineWidth(5)
      ctx.moveTo(50, 50)
      ctx.lineTo(50, 150)
      ctx.lineTo(100, 150)
      ctx.lineTo(50, 50)
      ctx.setShadow(4, 4, 4, 'red')
      ctx.stroke()
    })
    // 画圆
    this.addEventListener('round', () => {
      // 获取canvas对象
      const element = document.querySelector("#canvasx") as CanvasElement;
      const ctx:CanvasContext = element.getContext();      
      ctx.beginPath();
      ctx.arc(20, 20, 10, 0, 2 * 3.14)
      ctx.setStrokeStyle('green')
      ctx.stroke()
    })
    // 画点
    this.addEventListener('drop', () => {
      // 获取canvas对象
      const element = document.querySelector("#canvasx") as CanvasElement;
      const ctx:CanvasContext = element.getContext();
      ctx.beginPath();
      ctx.arc(50, 20, 10, 0, 2 * 3.14)
      ctx.setFillStyle('red')

      ctx.fill()
      ctx.draw()
    })
    // 画边框
    this.addEventListener('strokeRect', () => {
      // 获取canvas对象
      const element = document.querySelector("#canvasx") as CanvasElement;
      const ctx:CanvasContext = element.getContext();
      ctx.beginPath()
      ctx.strokeRect(80, 10, 40, 40)
      ctx.setFillStyle('red')
      ctx.fill()
      ctx.draw()
    })
    // 画矩形
    this.addEventListener('reac', () => {
      // 获取canvas对象
      const element = document.querySelector("#canvasx") as CanvasElement;
      const ctx:CanvasContext = element.getContext();
      ctx.beginPath();
      ctx.fillRect(130, 10, 40, 40)
      ctx.setFillStyle('red')
      ctx.fill()
      ctx.draw()
    })
    // 清空画布
    this.addEventListener('clear', () => {
      // 获取canvas对象
      const element = document.querySelector("#canvasx") as CanvasElement;
      const ctx:CanvasContext = element.getContext();
      ctx.beginPath();
      ctx.clearRect(0, 0, 1000, 1000)
    })
    // 绘制图片
    this.addEventListener('drawImage', () => {
      // 获取canvas对象
      const element = document.querySelector("#canvasx") as CanvasElement;
      const ctx:CanvasContext = element.getContext();      
      ctx.beginPath();
      ctx.drawImage(
        'https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg',
        100,
        20,
        300,
        100
      )
      // ctx.arc(50, 50, 10, 0, 2 * 3.14)
      // ctx.createCircularGradient(50, 50, 10)
      // ctx.addColorStop(0, 'green')
      // ctx.addColorStop(180, 'red')
      // ctx.fill()
      ctx.draw()
      // ctx.fillRect(20,20,150,100);
    })
    // 二次曲线
    this.addEventListener('bezierCurveTo', () => {
      // 获取canvas对象
      const element = document.querySelector("#canvasx") as CanvasElement;
      const ctx:CanvasContext = element.getContext();      
      ctx.beginPath();
      ctx.moveTo(20, 20);
      ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
      ctx.setStrokeStyle('black');
      ctx.stroke();
      // ctx.fillRect(20,20,150,100);
    })
    // 文本
    this.addEventListener('fillText', () => {
      // 获取canvas对象
      const element = document.querySelector("#canvasx") as CanvasElement;
      const ctx:CanvasContext = element.getContext();      
      ctx.beginPath();
      ctx.fillText('测试文本', 70, 20);
      ctx.setFontSize(50);
      ctx.setTextAlign('center');
      ctx.setTextBaseline('bottom');
      ctx.draw();
    })
    // 文本宽度
    this.addEventListener('measureText', () => {
      // 获取canvas对象
      const element = document.querySelector("#canvasx") as CanvasElement;
      const ctx:CanvasContext = element.getContext();      
      console.log('===measureText1====')
      ctx.measureText('测试文本', (target) => {
        const detail = target.getObject('detail')
        console.log(target.toString()+'===target1====')
        const newState = new JSONObject;
        newState.set('measureText', detail.toString())
        _this.setState(newState)
      })
    })
  }
  onShow(): void{
    // 页面显示
    console.log('page onShow');
  }
  onLoad(query: JSONObject): void{
    // 页面加载后
    console.log('page onLoad:' + JSON.stringify(query));
  }
  onMessage(event: MessageEvent): void{
    // 信息推送更新
    console.log('page onMessage:' + JSON.stringify(event.data));
  }
}

属性getContext

获取Canvas上下文

import { CanvasElement, CanvasContext } from 'waft';
// 获取canvas对象
const element = document.querySelector("#canvasx") as CanvasElement;
const ctx:CanvasContext = element.getContext();

API