【sass】实现三角函数

    xiaoxiao2024-04-19  3

    首先要说sass和scss的区别。sass之前是缩进的语法,有点像python和jade那样,写起来有点不方便,所以后来兼容了css的写法,就变成了scss。

    sass支持函数,循环,each,mixin这样,还有四则运算。有了for就可以完成很多形状的绘制了,但是木有三角函数很不方便的说= =。

    主要参考自:http://jimyuan.github.io/blog/2015/02/12/trigonometry-in-sass.html

    这是泰勒展开式 …(数学,真有趣…)

    所以可以根据展开式来计算相对的值,由于精度的要求不是太大,所以n取10这样就好了。中间还要处理下阶乘函数和pow函数。

    @function fact($number) { $value: 1; @if $number > 0 { @for $i from 1 through $number { $value: $value * $i; } } @return $value; } @function pow($number, $exp) { $value: 1; @if $exp > 0 { @for $i from 1 through $exp { $value: $value * $number; } } @else if $exp < 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }如果指数大一点,可以考虑用快速幂来算。

    然后对于sin,cos函数传入的参数是deg,需要转成那啥的数(deg / 360 * π)。。

    @function rad($angle) { $unit: unit($angle); $unitless: $angle / ($angle * 0 + 1); @if $unit == deg { $unitless: $unitless / 180 * pi(); } @return $unitless; } @function pi() { @return 3.14159265359; }

    然后就是三角函数了:

    @function sin($angle) { $sin: 0; $angle: rad($angle); // Iterate a bunch of times. @for $i from 0 through 10 { $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1); } @return $sin; } @function cos($angle) { $cos: 0; $angle: rad($angle); // Iterate a bunch of times. @for $i from 0 through 10 { $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i); } @return $cos; } @function tan($angle) { @return sin($angle) / cos($angle); }

    然后还有开根号的函数,需要用,所以也写了。是使用牛顿迭代法算的- -

    @function fabs($x) { @if $x > 0 { @return $x; } @else { @return $x * -1; } } @function sqrt($x) { $ans: $x; $del: 0.00001; $pre: 0; @while fabs($ans - $pre) >= $del { $pre: $ans; $ans: ($ans + $x / $ans) / 2; } @return $ans; }

    转载请注明原文地址: https://ju.6miu.com/read-1288154.html
    最新回复(0)