应用css完成随意尺寸、随意方位和随意角度的箭

网页页面开发设计中，常常会应用到 往下拉箭头

，右边箭头

这样的箭头。 1般用css来完成：

{  
        display: inline-block;  
        margin: 72px;  
        border-top: 24px solid;
        border-right: 24px solid;  
        width: 120px;
        height: 120px;  
        transform: rotate(45deg); 
    }

由于这是运用div的border-top, border-right，随后根据转动div来完成的。

随意角度的箭头

这里有个难题： 倘若必须1个角度为120度的箭头如何办呢？ 因为border-top, border-right1直是90度， 因此仅仅根据转动不好。 大家能够先把div 转动45度， 让它变成1个 菱形 随后再伸缩，做到随意的角度， 这样便可以获得1个 随意角度的箭头。因为用到了转动和伸缩两种转换，因此必须应用 transform: matrix(a,b,c,d,e,f) 这个转换引流矩阵。 这里的6个自变量构成了1个3介的转换引流矩阵

平移引流矩阵

v(x, y) 沿着x轴平移tx， 沿着y轴平移ty。 则有：

x' = x + tx
y' = y + ty

因此平移引流矩阵：

v(x, y) 点绕原点转动θ到v'(x', y')

则有：

x = r * cos(ϕ )
y = r * sin(ϕ )

x' = r * cos(θ + ϕ) = r * cos(θ) * cos(ϕ) - r * sin(θ) * sin(ϕ ) // 余弦公式
y' = r * sin(θ + ϕ) = r * sin(θ) * cos(ϕ) + r * cos(θ) * sin(ϕ ) // 正弦公式

因此：

x' = x * cos(θ) - y * sin(θ)
y' = x * sin(θ) + y * cos(θ)

因此转动引流矩阵：

假定x轴，y轴的伸缩率各自是kx， ky。 则有：

x' = x * kx
y' = y * ky

因此：

假如是对p(x, y)先平移(转换引流矩阵A)， 随后转动(转换引流矩阵B)， 随后伸缩(转换引流矩阵C)呢?

p' =C(B(Ap)) ==> p' = (CBA)p //引流矩阵乘法融合率

如今随意角度o的箭头就很简易了：

先把div转动45度 变成 菱形， 转换为 M1 伸缩x轴， y轴 :

x' = size * cos(o/2) = x * √2 *  cos(o/2)
y' = size * sin(o/2) = y *  √2  * sin(o/2)

即： kx = √2 * cos(o/2); ky = √2 * sin(o/2) 这样就获得了随意角度的箭头。 转换为 M2

假如箭头的方位并不是指向右边， 在开展1次转动便可以获得随意方位的箭头。转换为 M3

那末因为 p' =C(B(Ap)) ==> p' = (CBA)p , 大家便可以先测算出 M3 M2 M1，随后对div开展相应的转换，便可以获得随意角度， 随意方位的箭头了。

div的width和height便是箭头的边长， 根据调剂能够获得随意边长的箭头。

React组件

以便便捷应用， 这个箭头被封裝以便1个 React组件。

示例 

简易箭头

仿真模拟select

发散箭头

props

name type default description degree number 90 箭头的张角, 角度制 offsetDegree number 0 箭头的方位，默认设置指向右侧 color string - 箭头的色调 size string 10px 箭头边长

安裝应用

npm install rc-arrow --save

import Arrow from 'rc-arrow'

class Hw extends Component {
    render() {
        return (
            <Arrow size="20px" color="red"/>
        )
    }
}

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。