智能小程序 Ray 开发——Canvas组件实操讲解

canvas

在 Ray 中使用 canvas 进行混合开发

画布。

相关 API: createCanvasContext.

使用方法

  • 方法一: 使用 RJS 进行绘制, 可以获取到 canvas节点, 可以绘制图表, 动画和各种图形等。

  • 方法二: 在逻辑层 js 中配合 createCanvasContext API 使用, 此方法获取不到 canvas node 节点。

import { createCanvasContext } from '@ray-js/api';
 
const context = createCanvasContext('***');

推荐使用 方法一 RJS 进行绘制, 性能更好。

属性说明

属性名类型默认值必填说明
typestring指定 canvas 类型,有效值值为 2d
canvas-idstringcanvas 组件的唯一标识符,必须设置该属性
disable-scrollbooleanfalse当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新
bind:touchstarteventhandle手指触摸动作开始
bind:touchmoveeventhandle手指触摸后移动
bind:touchendeventhandle手指触摸动作结束
bind:touchcanceleventhandle手指触摸动作被打断,如来电提醒,弹窗
bind:longtapeventhandle手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动
bind:erroreventhandle当发生错误时触发 error 事件,detail = {errMsg}

 👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。 

示例代码

Page tsx
import { usePageEvent, usePageInstance } from 'ray';
import React from 'react';
import { createCanvasContext } from '@ray-js/api';
import { View, Progress } from '@ray-js/components';
import Chart from '@/components/Chart';
import Render from './index.rjs';
 
 
export default function () {
 
  const ctx = usePageInstance();
 
  usePageEvent('onReady', () => {
    console.log('onReady');
 
    pageDrawSmile();
 
    const render = new Render(ctx);
    render.pageDraw();
  });
 
  const pageDrawSmile = () => {
    const context = createCanvasContext('pageCanvas1');
    context.setStrokeStyle('#00ff00');
    context.setLineWidth(5);
    context.rect(0, 0, 200, 200);
    context.stroke();
    context.setStrokeStyle('#ff0000');
    context.setLineWidth(2);
    context.moveTo(160, 100);
    context.arc(100, 100, 60, 0, 2 * Math.PI, true);
    context.moveTo(140, 100);
    context.arc(100, 100, 40, 0, Math.PI, false);
    context.moveTo(85, 80);
    context.arc(80, 80, 5, 0, 2 * Math.PI, true);
    context.moveTo(125, 80);
    context.arc(120, 80, 5, 0, 2 * Math.PI, true);
    context.stroke();
    context.draw();
  }
 
  return (
    <View>
      <View style={{padding: '32rpx'}} >自定义组件中通过 RJS 绘制的 canvas 图表</View>
      <Chart title="canvas and RJS demo in component" id="mychart" type="2d"/>;
 
      <View style={{padding: '32rpx'}}>页面中直接绘制的 canvas</View>
      <canvas style={{width: '300px', height: '200px'}} canvas-id="pageCanvas1"></canvas>
 
      <View style={{padding: '32rpx'}}>页面中通过 RJS 绘制的 canvas</View>
      <canvas style={{width: '300px', height: '200px'}} canvas-id="pageCanvas2"></canvas>
    </View>
  );
}

Page rjs
export default Render({
  pageDraw() {
    getCanvasById('pageCanvas2', this).then((canvas) => {
      const ctx = canvas.getContext("2d");
      ctx.fillStyle = "rgb(200,0,0)";
      ctx.fillRect(10, 10, 55, 50);
 
      ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
      ctx.fillRect(30, 30, 55, 50);
    })
  },
});

以下是自定义组件 Chart
components/Chart/index.tyml
<canvas canvas-id="chart" id="chart" type="2d" />

components/Chart/index.js
import Render from './index.rjs';
 
Component({
  lifetimes: {
    ready: function () {
      this.rjs = new Render(this);
      this.rjs.drawF2Chart();
    },
  },
  methods: {
    myFn: function (args) {
      console.log('this my function', args);
    },
  },
});

components/Chart/index.rjs
import { windowAdapter, documentAdapter } from '@tuya-miniapp/rjs-adapter';
import F2 from '@antv/f2/lib/index';
 
function copyProperties(target = {}, source = {}) {
  Object.keys(source).forEach(propName => {
    target[propName] = source[propName]
  });
}
 
windowAdapter((window) => copyProperties(window))
documentAdapter((document) => copyProperties(document))
 
// F2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 }
];
export default Render({
  async drawF2Chart() {
    const canvas = await getCanvasById('chart', this);
    // Step 1: 创建 Chart 对象
    const chart = new F2.Chart({
      el: canvas,
      padding: 0,
      appendPadding: 0,
      pixelRatio: getSystemInfo().pixelRatio || 2
    });
 
    // Step 2: 载入数据源
    chart.source(data);
 
    // Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
    chart.interval()
      .position('genre*sold')
      .color('genre');
 
    // Step 4: 渲染图表
    chart.render();
  }
});

components/Chart/index.json
{
  "component": true
}

👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IoT砖家涂拉拉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值