</JavaScript>数学玩儿法,自动生成刻度

本文介绍了一种在AfterEffects中自动生成坐标系的方法,主要针对图表制作。通过JavaScript实现,根据输入数组自动计算最小值和最大值,并采用科学计数法确定刻度单位,确保坐标轴的精确和自动化。适用于柱状图和折线图的坐标系统设置,简化了手动调整坐标的工作流程。
摘要由CSDN通过智能技术生成

这个方法是要用到 After Effects 中的,因为我一直想编写一套自动化的 AE 图表方法,大多数图表都涉及到坐标系,但是手动生成坐标系是非常麻烦的,而且修改的时候会出大麻烦,所以一点一点来写,先搞定自动坐标系的问题。

下面这个方法现在仅局限于 js,如果要用到 AE 里面还需要参考另一篇文章:

王世杰:[AE 表达式]函数复用技巧

因此这篇文章暂时不归类到 AE 表达式专栏中。

直接贴代码,省事儿点儿,因为注释写的算是比较详细了:

/**
 * 自动生成坐标刻度的方法
 * @arr 是一个数组,顺序无所谓
 * @alignToOrigin 是不是对齐到 0,下面有说明
 */
function getScale(arr, alignToOrigin = false) {
    // arr 可以只有一个值,此时自动对齐到 0 
    if (arr.length == 1) {
        arr.push(0)
    }
    // 获取实际的最小值
    let _min = Math.min.apply(null, arr);
    // 获取实际的最大值
    let _max = Math.max.apply(null, arr);

    // 柱状图是比较值的总数的图标,因此无论是最大值还是最小值,都需要以 0 作为参考
    // 如果时折线图,有时为了看出明显的折线波动,就不需要以 0 坐标为起点
    // 最小值大于 0 时,代表所有值都是正数
    if (alignToOrigin && _min > 0) { _min = 0 };
    // 最大值小于 0 时,代表所有值都是负数
    if (alignToOrigin && _max < 0) { _max = 0 };

    // 首先计算出从最小值到最大值的跨度,然后转换成指数计数法(科学计数法)
    // 科学记数法是一种记数的方法,把一个数表示成 a 与 10 的 n 次幂相乘的形式
    // 1≤|a|<10,a 不为分数形式,n 为整数
    // 例如 0.002 表示为 2e-3;2000 表示为 2e+3
    // 把指数计数按 "e" 分割为数组,数组第二个数字就可以用来确定数字数位
    let _distance = (_max - _min).toExponential().split("e");
    // 先以数位作为格长度,例如值跨度是个位数,则格长度为 1
    let _unit = Math.pow(10, _distance[1]);
    // 根据情况自动调整 _unit
    if (_distance[0] <= 2) {
        // 如果指数计数法中的 a 小于等于 2,则用 0.2 * 10 的 n 次幂为格长度
        _unit *= 0.2;
    } else if (_distance[0] > 2 && _distance[0] <= 4) {
        // 如果指数计数法中的 a 大于 2 且小于等于 4,则用 0.5 * 10 的 n 次幂为格长度
        _unit *= 0.5;
    } else {
        _unit;
    }
    // 处理最小值和最大值,让最小值和最大值刚好在 _discrete 外围的格上(可以对 _unit 整除)
    // 最小值如果不能整除,则退格到前一个整单位
    if (_min % _unit !== 0) {
        if (_min < 0) {
            // 最小值为负数时需要减一个单位
            _min -= _unit;
        }
        // 去掉余数
        _min -= _min % _unit;
    }
    // 最大值如果不能整除,则进格到下一个整单位
    if (_max % _unit !== 0) {
        if (_max > 0) {
            // 最大值为正数时需要加一个单位
            _max += _unit;
        }
        // 去掉余数
        _max -= _max % _unit;
    }
    // 返回对象
    return {
        min:_min,
        max:_max,
        unit:_unit
    }
}
// 调用演示
let scale = getScale([-1.2,-4.1])
console.log(JSON.stringify(scale))
for(let i=0;i<=(scale.max-scale.min)/scale.unit;i++){
    console.log(scale.min +scale.unit*i)
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值