Tuya Developer Forum

作为一个使用原生 Canvas 的涂鸦开发者

• 还在对纷繁的 Canvas API 眼花缭乱，频繁踩坑？
• 还在对于不支持单个图像级别的事件而花费几倍的事件自行实现事件？
• 还在对于如何快速绘制图形而苦恼？

现在涂鸦小程序官方 Canvas 库启动了！

• 提出你在使用 Canvas 中的需求，专为涂鸦小程序开发者开发的 Canvas 库，需要你们的宝贵建议！

暂定实现的主要功能：

1. 支持快速绘制常见图形
   1. 圆形
   2. 矩形
   3. 文字
   4. 正多边形
   5. 环形
   6. 椭圆
   7. .....
2. 支持常见的图形样式效果
   1. 透明度
   2. 阴影
   3. ...
3. 支持图形变换
   1. 缩放
      1. 旋转
      2. 平移
      3. 歪斜
4. 支持像素级事件碰撞检测
   1. drag
   2. touchStart
   3. touchMove
   4. touchEnd
5. 支持自定义图形
   1. 基础图形组块形成组合图形
   2. 自定义图形单个图形
6. 支持群组管理
   1. 多个图形可以组成一组进行统一管理，减少开发中的心智负担
7. 支持最佳性能开发提醒
   1. 当开发中与最佳实践冲突，会给出优化建议
      - 比如：
      - Canvas 个数限制
      - 短时间内频繁绘制

在面板小程序中，用canvas的api去设置字体样式未生效
// 绘制设置温度值
const drawText = (context, rateNum) => {
// context.font = 'bold 50px Arial, Helvetica, sans-serif'
context.font = 'bold 50px Arial'
context.setTextAlign('center');
let rel = parseInt((Math.round(rateNum * Math.pow(10, 3)) / Math.pow(10, 3) * 100).toString()) + 12 // ---修改
rel = parseInt((rel / 6).toString()) + 18
let showText = rel;
context.fillText(showText+' ℃', 150, 150);
}

用的这个api import { createCanvasContext } from '@ray-js/api';

cabbage 2024年 Mar 13日 15:33

在面板小程序中，用canvas的api去设置字体样式未生效
// 绘制设置温度值
const drawText = (context, rateNum) => {
// context.font = 'bold 50px Arial, Helvetica, sans-serif'
context.font = 'bold 50px Arial'
context.setTextAlign('center');
let rel = parseInt((Math.round(rateNum * Math.pow(10, 3)) / Math.pow(10, 3) * 100).toString()) + 12 // ---修改
rel = parseInt((rel / 6).toString()) + 18
let showText = rel;
context.fillText(showText+' ℃', 150, 150);
}

用的这个api import { createCanvasContext } from '@ray-js/api';

  const ctx = ty.createCanvasContext('canvasId');
  // ctx.font = '44px';
  ctx.setFontSize(50); // https://developer.tuya.com/cn/miniapp/develop/miniapp/api/canvas/CanvasContext/setFontSize
  ctx.fillText('是大哥大', 50, 50);
  ctx.draw();

可以了 谢谢！

好像没有设置字体粗体的api，只有设置字体大小和颜色的

cabbage 2024年 Mar 13日 18:22

好像没有设置字体粗体的api，只有设置字体大小和颜色的

单独开个帖子吧，会有相关人员跟进的

面板小程序当前不支持createConicGradient吗

wink_li 2024年 Apr 25日 09:48

面板小程序当前不支持createConicGradient吗

支持的，ide和真机都可以，有什么报错么？

crisiron 2024年 Apr 25日 10:00

wink_li 2024年 Apr 25日 09:48

面板小程序当前不支持createConicGradient吗

支持的，ide和真机都可以，有什么报错么？

service.js?side=service:3 TypeError: ctx2.createConicGradient is not a function

import { usePageEvent, usePageInstance } from 'ray';
import React from 'react';
import { createCanvasContext } from '@ray-js/api';
import { View, Progress } from '@ray-js/components';

export default function CanvasComponent() {
 
  const ctx = usePageInstance();
  
  usePageEvent('onReady', () => {
    console.log('onReady');
  
    pageDrawSmile();
  });
  
  const pageDrawSmile = () => {      
    const ctx = createCanvasContext('pageCanvas1')
    const gradient = ctx.createConicGradient(0, 100, 100);

    gradient.addColorStop(0, "red");
    gradient.addColorStop(0.25, "orange");
    gradient.addColorStop(0.5, "yellow");
    gradient.addColorStop(0.75, "green");
    gradient.addColorStop(1, "red");

    // Set the fill style and draw a rectangle
    ctx.setStrokeStyle(gradient);
    ctx.setLineWidth(14);
    ctx.setLineCap('round');
    ctx.arc(100, 100, 50, 0, Math.PI * 2 * 0.75, false);
    ctx.stroke();
  }
  
  return (
    <View>
      <canvas style={{width: '200px', height: '200px'}} canvas-id="pageCanvas1"></canvas>
    </View>
  );
}

<canvas style={{width: '200px', height: '200px'}} canvas-id="pageCanvas1"></canvas> 这个加上 type='2d'
类似
<canvas class='ray_canvas' canvas-id='canvasId' disable-scroll="true" type='2d'></canvas>