ReactNative 圆形进度条 ART Path arcTo 圆弧实现
因为现在简书发 如果图片不能用 点这里首先来吐槽一番 同时相比于Android 等开发 RN还比较新 导致的结果是遇到问题后 能用的资料少啊。。。这种情况下 连最应该有的文档都没有 吐血三升先。。。 所以我就查了一下RN开发的绘图库ART 发现不是canvas之类的(Android中用canvas习惯了) 最可怕的是网上只有一些简单的关于ART的说明 和一个大兄弟封装了一个SVG基于ART的库 就和在前端使用SVG那样使用来绘制 我不想这样使用 就只能自己摸索着开始
d=”M100,0 A50,50 0 0,1 100,100”看看这段字符串 寓意
现在转移到圆弧的进度条的中心思想来 先思考圆弧进度条怎么画
/**
* 计算目的坐标位置 右边 <180度的计算
* @param progress
* @param total
* @param startX
* @param startY
*/
function calTargetXY(progress,total,startX,startY,radius) {
let degress = progress / total * 360;
if (degress > 180) {
//log(Tag,'强制 degress -> 180');
degress = 180;
}
//log(Tag,"开始位置 " + startX + " " + startY + " r: " + radius + " degress " + degress);
let target = [];
if (degress <= 90) {
degress = degress * 2 * Math.PI / 360;
// log(Tag,"sin " + Math.sin(degress));
let endx = startX + radius * Math.sin(degress);
let endy = startY + radius - radius * Math.cos(degress);
target.push(endx);
target.push(endy);
return target;
}
else if (degress <= 180) {
degress = degress - 90;
degress = degress * 2 * Math.PI / 360;
// log(Tag,"sin " + Math.sin(degress));
let endx = startX + radius * Math.cos(degress);
let endy = startY + radius + radius * Math.sin(degress);
target.push(endx);
target.push(endy);
return target;
}
}
* 左边圆的计算 >180度的计算
* @param degress
* @param startX
* @param startY
* @param radius
*/
function calTargetXY1(degress,radius) {
let target = [];
//log(Tag,"开始位置1 " + startX + " " + startY + " r: " + radius + " degress " + degress);
if (degress > 360) {
degress = 360;
}
if (degress <= 270) {
degress = degress - 180;
degress = degress * 2 * Math.PI / 360;
// log(Tag,Math.sin(degress));
let endx = startX - radius * Math.sin(degress);
let endy = startY - ( radius - +radius * Math.cos(degress));
target.push(endx);
target.push(endy);
return target;
} else if (degress <= 360) {
degress = degress - 270;
degress = degress * 2 * Math.PI / 360;
let endx = startX - radius * Math.cos(degress);
let endy = startY - radius - radius * Math.sin(degress);
target.push(endx);
target.push(endy);
return target;
}
}
"Arx,y1"
i=1;
case 'A':
this.arcTo(p[i+5],p[i+6],p[i],p[i+1],p[i+3],!+p[i+4],p[i+2]);
break;
>this.arcTo(p[i+5],p[i+2]);
其实就是
this.arcTo(p[6],p[7],p[1],p[2],p[4],!+p[5],p[3]);
也就是
this.arcTo(x1,y1,rx,ry,0,1,0);
0，1，0--》大小弧度,镜像与否,x轴旋转啥的默认不管,
然后这里我们发现其实push就已经能实现工作 只要我们在push里面传入想要的字符串就行
github地址 点我点我 可以的话 给个star 当你在穿山越岭的另一边 我在孤独的路上没有尽头 一辈子有多少的来不及 发现已经失去 最重要的东西 恍然大悟早已远去 为何总是在犯错之后 开始相信错的是自己 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
