使用usePageScroll这个hooks时,在h5端不会调用
J
jd_4d69a5efc6dda
@jd_4d69a5efc6dda
0
声望
5
帖子
160
资料浏览
0
粉丝
0
关注
jd_4d69a5efc6dda 发布的帖子
-
RE: taro3.X版本 使用Taro.createCanvasContext创建canvas上下文后,无法调用draw的方法绘制canvas
3.0.7的版本不可以,3.0.5以下的版本都可以
-
Taro3.0.7版本canvas组件无法调用draw的方法,Taro2.x亲测是可以的
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> ); } }
-
taro3.X版本 使用Taro.createCanvasContext创建canvas上下文后,无法调用draw的方法绘制canvas
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> ); } }