|
|
@@ -27,8 +27,39 @@ export default function Dial() {
|
|
|
// ctx.stroke();
|
|
|
// };
|
|
|
|
|
|
+ useEffect(() => {
|
|
|
+ console.log('Page loaded.')
|
|
|
+ Taro.createSelectorQuery()
|
|
|
+ .select("#circleCanvas")
|
|
|
+ .fields({ node: true, size: true })
|
|
|
+ .exec(res => {
|
|
|
+ console.log('Page loaded2.')
|
|
|
+ if (res[0] && res[0].width) {
|
|
|
+ console.log('Page loaded3.')
|
|
|
+ const canvas = res[0].node;
|
|
|
+ const ctx = canvas.getContext("2d");
|
|
|
+ // Canvas 画布的实际绘制宽高
|
|
|
+ const width = res[0].width;
|
|
|
+ const height = res[0].height;
|
|
|
+ // 初始化画布大小
|
|
|
+ const dpr = Taro.getSystemInfoSync().pixelRatio;
|
|
|
+ canvas.width = width * dpr;
|
|
|
+ canvas.height = height * dpr;
|
|
|
+ const w = width * dpr;
|
|
|
+ const h = height * dpr;
|
|
|
+ // 绘制内圆
|
|
|
+ ctx.lineWidth = 13 * dpr;
|
|
|
+ ctx.strokeStyle = "rgba(90, 216, 213, 0.5)";
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(w / 2, h / 2, w / 2 - 20 * dpr, 0, Math.PI * 2, false); // 绘制
|
|
|
+ ctx.stroke();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
return (
|
|
|
<View>
|
|
|
+ <Text>123</Text>
|
|
|
<Canvas ref={canvasRef}
|
|
|
style={{ width: '200px', height: '200px' }}
|
|
|
canvasId="circleCanvas"></Canvas>
|
Leon