canvas
在 Ray 中使用 canvas 进行混合开发
画布。
相关 API: createCanvasContext.
使用方法
-
方法一: 使用 RJS 进行绘制, 可以获取到 canvas节点, 可以绘制图表, 动画和各种图形等。
-
方法二: 在逻辑层 js 中配合 createCanvasContext API 使用, 此方法获取不到 canvas node 节点。
import { createCanvasContext } from '@ray-js/api';
const context = createCanvasContext('***');
推荐使用 方法一 RJS 进行绘制, 性能更好。
属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
type | string | 否 | 指定 canvas 类型,有效值值为 2d | |
canvas-id | string | 是 | canvas 组件的唯一标识符,必须设置该属性 | |
disable-scroll | boolean | false | 否 | 当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新 |
bind:touchstart | eventhandle | 否 | 手指触摸动作开始 | |
bind:touchmove | eventhandle | 否 | 手指触摸后移动 | |
bind:touchend | eventhandle | 否 | 手指触摸动作结束 | |
bind:touchcancel | eventhandle | 否 | 手指触摸动作被打断,如来电提醒,弹窗 | |
bind:longtap | eventhandle | 否 | 手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动 | |
bind:error | eventhandle | 否 | 当发生错误时触发 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 小程序开发。