怎么做出这种会动的圆圈虚线呢

一张圆形虚线图片加旋转不就是了

我想用代码实现 绘制

你可能在找cc.RenderTexture

2ea1c157-da37-4d1c-aabf-7b49b01329b01338×750 31.6 KB

const g = this.graphicsComp;
g.lineWidth = 5;
let startpos = v2(0, RADIUS);
for (let i = 0; i < 360; i += 30) {
let stp = startpos.clone().rotate((i / 180) * Math.PI);
g.moveTo(stp.x, stp.y);
let rtp = startpos.clone().rotate(((i + 10) / 180) * Math.PI);
g.lineTo(rtp.x, rtp.y);
}
g.stroke();

简单写了一个

优化了一下曲线，加上旋转动作，完整代码

import { _decorator, Component, Graphics, tween, v2, v3 } from “cc”;
const { ccclass, property } = _decorator;

const RADIUS = 50;

@ccclass(“circleDotted”)
export class circleDotted extends Component {
@property(Graphics)
graphicsComp: Graphics = null;
start() {
this.drawLine();
this.action();
}

drawLine() {
    const g = this.graphicsComp;
    g.lineWidth = 5;
    let startpos = v2(0, RADIUS);
    for (let i = 0; i < 360; i += 30) {
        let stp = startpos.clone().rotate((i / 180) * Math.PI);
        g.moveTo(stp.x, stp.y);
        let rtp = startpos.clone().rotate(((i + 10) / 180) * Math.PI);
        let rtp2 = startpos.clone().rotate(((i + 20) / 180) * Math.PI);
        g.lineTo(rtp.x, rtp.y);
        g.lineTo(rtp2.x, rtp2.y);
    }
    g.stroke();
}

action() {
    tween(this.node)
        .repeatForever(
            tween(this.node)
                .by(0.5, { eulerAngles: v3(0, 0, -100) })
                .delay(0.5)
        )
        .start();
}

update(deltaTime: number) {}

}

image872×718 20.4 KB

我也贴一个

 drawDottedCircle() {
        const ctx = this.graphics;
        if (!ctx) {
            return;
        }
        // 设置虚线的属性
        ctx.lineWidth = 5;
        ctx.strokeColor = cc.Color.RED;
     
        const spaceAngle = 10; //虚线间隔
        const deltaAngle = 10;

        const center = cc.v2(0, 0); //圆心
        const radius = 100;//圆半径

        // 绘制分割的虚线圆形
        for (let i = 0; i < 360; i+=deltaAngle+spaceAngle) {
            const sRadian = cc.misc.degreesToRadians(i);
            const eRadian = cc.misc.degreesToRadians(i+deltaAngle);
            ctx.arc(center.x,center.y,radius,sRadian,eRadian,true);
            ctx.stroke();
        }
    }

good good！！！

感谢感谢