Taro

jd_4d69a5efc6dda

使用usePageScroll这个hooks时，在h5端不会调用

jd_4d69a5efc6dda

3.0.7的版本不可以，3.0.5以下的版本都可以

jd_4d69a5efc6dda

3.0.7的版本不可以，3.0.5以下的版本都可以

jd_4d69a5efc6dda

import Taro from "@tarojs/taro";
import { View, Button, Canvas } from "@tarojs/components";
import React, { Component } from "react";

interface IProps {}

interface IState {}

export default class Index extends Component<IProps, IState> {
  constructor(props) {
    super(props);
  }

  draw = () => {
    const ctx = Taro.createCanvasContext("testMe",this);
    console.log('ctx', ctx);
    
    // Draw coordinates
    ctx.arc(100, 75, 50, 0, 2 * Math.PI);
    ctx.setFillStyle("#EEEEEE");
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(40, 75);
    ctx.lineTo(160, 75);
    ctx.moveTo(100, 15);
    ctx.lineTo(100, 135);
    ctx.setStrokeStyle("#AAAAAA");
    ctx.stroke();
    ctx.setFontSize(12);
    ctx.setFillStyle("black");
    ctx.fillText("0", 165, 78);
    ctx.fillText("0.5*PI", 83, 145);
    ctx.fillText("1*PI", 15, 78);
    ctx.fillText("1.5*PI", 83, 10);
    // Draw points
    ctx.beginPath();
    ctx.arc(100, 75, 2, 0, 2 * Math.PI);
    ctx.setFillStyle("lightgreen");
    ctx.fill();
    ctx.beginPath();
    ctx.arc(100, 25, 2, 0, 2 * Math.PI);
    ctx.setFillStyle("blue");
    ctx.fill();
    ctx.beginPath();
    ctx.arc(150, 75, 2, 0, 2 * Math.PI);
    ctx.setFillStyle("red");
    ctx.fill();
    // Draw arc
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 1.5 * Math.PI);
    ctx.setStrokeStyle("#333333");
    ctx.stroke();    

    ctx.draw(false, () => {
      console.log("绘制成功");
    });
  };

  render() {
    return (
      <View className="index">
        <Button onClick={this.draw}>点我生成</Button>
        <Canvas
          canvasId="testMe"
          style={{ height: "400px", width: "400px" }}
        ></Canvas>
      </View>
    );
  }
}

jd_4d69a5efc6dda

import Taro from "@tarojs/taro";
import { View, Button, Canvas } from "@tarojs/components";
import React, { Component } from "react";

interface IProps {}

interface IState {}

export default class Index extends Component<IProps, IState> {
  constructor(props) {
    super(props);
  }

  draw = () => {
    const ctx = Taro.createCanvasContext("myCanvas");
    // Draw coordinates
    ctx.arc(100, 75, 50, 0, 2 * Math.PI);
    ctx.setFillStyle("#EEEEEE");
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(40, 75);
    ctx.lineTo(160, 75);
    ctx.moveTo(100, 15);
    ctx.lineTo(100, 135);
    ctx.setStrokeStyle("#AAAAAA");
    ctx.stroke();
    ctx.setFontSize(12);
    ctx.setFillStyle("black");
    ctx.fillText("0", 165, 78);
    ctx.fillText("0.5*PI", 83, 145);
    ctx.fillText("1*PI", 15, 78);
    ctx.fillText("1.5*PI", 83, 10);
    // Draw points
    ctx.beginPath();
    ctx.arc(100, 75, 2, 0, 2 * Math.PI);
    ctx.setFillStyle("lightgreen");
    ctx.fill();
    ctx.beginPath();
    ctx.arc(100, 25, 2, 0, 2 * Math.PI);
    ctx.setFillStyle("blue");
    ctx.fill();
    ctx.beginPath();
    ctx.arc(150, 75, 2, 0, 2 * Math.PI);
    ctx.setFillStyle("red");
    ctx.fill();
    // Draw arc
    ctx.beginPath();
    ctx.arc(100, 75, 50, 0, 1.5 * Math.PI);
    ctx.setStrokeStyle("#333333");
    ctx.stroke();
    debugger
    ctx.draw(false, () => {
      console.log("绘制成功");
    });
  };

  render() {
    return (
      <View className="index">
        <Button onClick={this.draw}>点我生成</Button>
        <Canvas
          id="myCanvas"
          style={{ height: "400px", width: "400px" }}
        ></Canvas>
      </View>
    );
  }
}

jd_4d69a5efc6dda

@jd_4d69a5efc6dda

jd_4d69a5efc6dda 发布的帖子