如下图,怎么可以实现那种有个柔和的路径,跟着路径柔和的走,不是直愣楞的?
利用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();