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

2020-10-29 23:37 jianzhan

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

,右边箭头

这样的箭头。 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介的转换引流矩阵

随意点p(x,y)的平移, 转动, 伸缩转换和她们的各种各样组成都可以以根据这个转换引流矩阵保证:

注:这里用齐次座标 来表述1个点。 简易说便是p(x, y) 表明为p'(x', y', 1)

平移引流矩阵

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"/>
        )
    }
}

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