热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

【sass】实现三角函数

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

首先要说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;
}





推荐阅读
  • Requests库的基本使用方法
    本文介绍了Python中Requests库的基础用法,包括如何安装、GET和POST请求的实现、如何处理Cookies和Headers,以及如何解析JSON响应。相比urllib库,Requests库提供了更为简洁高效的接口来处理HTTP请求。 ... [详细]
  • Web动态服务器Python基本实现
    Web动态服务器Python基本实现 ... [详细]
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • Jupyter Notebook多语言环境搭建指南
    本文详细介绍了如何在Linux环境下为Jupyter Notebook配置Python、Python3、R及Go四种编程语言的环境,包括必要的软件安装和配置步骤。 ... [详细]
  • 本文介绍了SIP(Session Initiation Protocol,会话发起协议)的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ... [详细]
  • JUnit下的测试和suite
    nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]
  • Markdown 编辑技巧详解
    本文介绍如何使用 Typora 编辑器高效编写 Markdown 文档,包括代码块的插入方法等实用技巧。Typora 官方网站:https://www.typora.io/ 学习资源:https://www.markdown.xyz/ ... [详细]
  • 在OpenCV 3.1.0中实现SIFT与SURF特征检测
    本文介绍如何在OpenCV 3.1.0版本中通过Python 2.7环境使用SIFT和SURF算法进行图像特征点检测。由于这些高级功能在OpenCV 3.0.0及更高版本中被移至额外的contrib模块,因此需要特别处理才能正常使用。 ... [详细]
  • 本文详细介绍了如何正确设置Shadowsocks公共代理,包括调整超时设置、检查系统限制、防止滥用及遵守DMCA法规等关键步骤。 ... [详细]
  • 深入解析WebP图片格式及其应用
    随着互联网技术的发展,无论是PC端还是移动端,图片数据流量占据了很大比重。尤其在高分辨率屏幕普及的背景下,如何在保证图片质量的同时减少文件大小,成为了亟待解决的问题。本文将详细介绍Google推出的WebP图片格式,探讨其在实际项目中的应用及优化策略。 ... [详细]
  • 高级缩放示例.就像谷歌地图一样.它仅缩放图块,但不缩放整个图像.因此,缩放的瓷砖占据了恒定的记忆,并且不会为大型缩放图像调整大小的图像.对于简化的缩放示例lookhere.在Win ... [详细]
  • PyCharm 安装与首个 Python 程序实践
    本文将指导您如何安装 PyCharm,并通过创建一个简单的 'Hello, World' 程序来初步体验这一强大的 Python 集成开发环境。 ... [详细]
  • 探索百度WebFE团队打造的强大HTML5上传插件Web Uploader
    本文将详细介绍由百度WebFE团队开发的Web Uploader,这是一款集成了HTML5与Flash技术的上传组件,以其卓越的用户体验和强大的功能著称。 ... [详细]
  • 本文介绍了.hbs文件作为Ember.js项目中的视图层,类似于HTML文件的功能,并详细讲解了如何在Ember.js应用中集成Bootstrap框架及其相关组件的方法。 ... [详细]
  • CRZ.im:一款极简的网址缩短服务及其安装指南
    本文介绍了一款名为CRZ.im的极简网址缩短服务,该服务采用PHP和SQLite开发,体积小巧,约10KB。本文还提供了详细的安装步骤,包括环境配置、域名解析及Nginx伪静态设置。 ... [详细]
author-avatar
手机用户2602923361
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有