autojs之超椭圆-阿里云开发者社区

autojs之超椭圆

2022-06-25 211

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 使用场景可视化超椭圆系数对曲线的作用

使用场景

可视化超椭圆系数对曲线的作用

autojs版本

缘由

小米200万的logo, 200万的曲线有多圆, 知乎大神给了公式

知乎提问: 如何看待网友称小米网页上 logo 只改了一行代码，logo 就从方变圆？是真的吗？

超椭圆百科

超椭圆（superellipse）也称为Lamé曲线，是一种类似于椭圆的封闭曲线，保留了椭圆的长轴、短轴、对称性的特点。

超椭圆（superellipse）也称为Lamé曲线，是在笛卡儿坐标系下满足以下方程式的点的集合：

其中n、a及b为正数。

　　上述方程式的解会是一个在−a≤x≤+a及−b≤y≤+b长方形内的封闭曲线，参数a及b称为曲线的半直径（semi-diameters）。

常见的超椭圆有星形线。

预备知识

Android使用Canvas和Path自定义绘制动画

代码讲解

1. 布局

canvas + text + seekbar

ui.layout(
  <vertical gravity="center">
    <canvas id="board" w="230dp" h="230dp"></canvas>
    <text textSize="26sp" textStyle="bold" gravity="center" textColor="#1abc9c">
      作者: 牙叔
    </text>
    <horizontal w="*" h="wrap_content" gravity="center" margin="3">
      <text textSize="30sp" textStyle="bold" gravity="center">
        N:
      </text>
      <text id="hyperellipseN" textSize="30sp" textStyle="bold" gravity="center">
        3
      </text>
    ...
    </horizontal>
    <horizontal margin="3">
      <text textSize="30sp" h="50dp" textStyle="bold">
        N
      </text>
      <seekbar id="seekbarN" w="*" h="50dp" max="100" />
    </horizontal>
  ...
  </vertical>
);

2. 初始化参数

let mPaint = new Paint();
let color = "#ff6900";
color = colors.parseColor(color);
mPaint.setColor(color);
mPaint.setStrokeWidth(10); // 设置圆环的宽度
mPaint.setAntiAlias(true); // 消除锯齿
mPaint.setStyle(Paint.Style.STROKE); // 设置空心
board = ui.board;
let mPath = new Path();
let deviation;
let multiple;
let n = 30;
let a = 1;
let b = 10;
let count = 1;

3. 设置滑块的监听事件

ui.seekbarN.setOnSeekBarChangeListener(seekbarNListenerN);
ui.seekbarA.setOnSeekBarChangeListener(seekbarAListenerA);
ui.seekbarB.setOnSeekBarChangeListener(seekbarBListenerB);
ui.seekbarCount.setOnSeekBarChangeListener(seekbarBListenerCount);

4. 画超椭圆

function draw() {
  deviation = board.getWidth() / 2;
  multiple = board.getWidth() / 2 - 20;
  let oMultiple = multiple;
  board.on("draw", function (canvas) {
    canvas.drawARGB(255, 127, 127, 127);
    for (let i = 0; i < count; i++) {
      画超椭圆(canvas, n, a, b, deviation, multiple);
      multiple = multiple - 30;
    }
    multiple = oMultiple;
  });
}

5. 超椭圆坐标计算

for (let x = -1; x < 1; x = x + step) {
  y = Math.pow(1 - Math.pow(Math.abs(x / a), n), 1 / n) * b;
  points.push({
    x: Math.round(x * multiple + deviation),
    y: Math.round(y * multiple + deviation),
  });
}
for (let x = 1; x > -1; x = x - step) {
  y = -Math.pow(1 - Math.pow(Math.abs(x / a), n), 1 / n) * b;
  points.push({
    x: Math.round(x * multiple + deviation),
    y: Math.round(y * multiple + deviation),
  });
}

声明

部分内容来自网络