uniapp小程序怎么实现文本绕路径?

如下图,怎么可以实现那种有个柔和的路径,跟着路径柔和的走,不是直愣楞的?

img

利用css的旋转属性 transform: rotate(90deg);,一个个字去单独调整就好了

这个不是设计的ui图么?

你尝试使用svg来调,大概这样

    <svg width="500" height="500">
        <path d="M 10,250 C 250,100 300,400 400,250" id="circle" stroke="blue" fill="none"></path>
        <text>
            <textPath xlink:href="#circle">这是围绕路径生成的环形文字~</textPath>
        </text>
    </svg>

只能用canvas画,我这路径写的不对,你的自己调

 // 获取canvas上下文
      const ctx = uni.createCanvasContext('myCanvas', this);

      // 设置曲线路径
      ctx.beginPath();
      ctx.moveTo(50, 150); // 曲线起点坐标
      ctx.quadraticCurveTo(150, 50, 250, 150); // 二次贝塞尔曲线控制点坐标和终点坐标
      ctx.stroke();

      // 设置文本样式
      ctx.setFontSize(20);
      ctx.setTextAlign('center');
      ctx.setTextBaseline('middle');
      ctx.setFillStyle('black');

      // 获取沿曲线的路径坐标
      const textPath = ctx.getTextPath('Hello, UniApp!', 150, 100, 20); // 曲线路径上的文字内容、曲线路径起点坐标、字间距

      // 绘制沿曲线路径的文本
      for (let i = 0; i < textPath.length; i++) {
        const char = textPath[i];
        ctx.fillText(char.text, char.x, char.y);
      }

      // 绘制到canvas上
      ctx.draw();