Используйте css для получения стрелок любого размера, любого направления и любого угла.

В веб-разработке часто используется стрелка раскрывающегося списка.

, правая стрелка

такая стрелка. Обычно используйте css для достижения:

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

Потому что это достигается с помощью верхней границы, правой границы div, а затем вращения div.

стрелка под любым углом

Вот вопрос: а если нужна стрелка с углом 120 градусов? Так как border-top и border-right всегда равны 90 градусам, просто повернуть их не получится. Мы можем сначала повернуть div на 45 градусов, придать ему форму ромба, а затем растянуть его на любой угол, чтобы получилась стрелка под любым углом. Поскольку используются два преобразования поворота и масштабирования, необходимо использоватьtransform: matrix(a,b,c,d,e,f)эта матрица преобразования. Шесть переменных здесь образуют матрицу преобразования с тремя средами.

Любое перемещение точки p(x,y), вращение, преобразование масштабирования и их различные комбинации могут быть выполнены с помощью этой матрицы преобразования:

Примечание: используется здесьОднородные координатычтобы выразить точку. Проще говоря, p(x, y) выражается как p'(x', y', 1)

матрица перевода

v(x, y) переводит tx по оси x и ty по оси y. Тогда есть:

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

так:

составное преобразование

Что, если мы сначала переведем (матрицу преобразования A) для p(x, y), затем повернем (матрицу преобразования B) и затем масштабируем (матрицу преобразования C)?

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

Теперь стрелка под любым углом o очень проста:

1. Сначала поверните div на 45 градусов, чтобы он стал ромбом, и превратите его вM1
2. Масштаб оси 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

如果箭头的方向不是指向右侧， 在进行一次旋转就可以得到任意方向的箭头。 Конвертирован вM3

тогда потому чтоp' =C(B(Ap)) ==> p' = (CBA)p, мы можем сначала вычислить M3M2M1, а затем преобразовать div соответствующим образом, вы можете получить стрелку любого угла и любого направления.

Ширина и высота div являются длинами сторон стрелок, и вы можете получить стрелки с любой длиной стороны, регулируя их.

Реагировать компоненты

Для удобства эта стрелка инкапсулирована как компонент React.git-адрес

Пример

простая стрелка	имитировать выбор	расходящиеся стрелки

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

---