資訊專欄INFORMATION COLUMN
摘要：使用實現任意大小，任意方向，任意角度的箭頭網頁開發中，經常會使用到下拉箭頭，右側箭頭這樣的箭頭。的和就是箭頭的邊長，通過調整可以獲取任意邊長的箭頭。
使用css實現任意大小，任意方向， 任意角度的箭頭
網頁開發中，經常會使用到 下拉箭頭，右側箭頭 這樣的箭頭。 一般用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來實現的。
任意角度的箭頭這里有個問題： 假如需要一個角度為120度的箭頭怎么辦呢？ 由于border-top, border-right一直是90度， 所以僅僅通過旋轉不行。
我們可以先把div 旋轉45度， 讓它成為一個 菱形 然后再伸縮，達到任意的角度， 這樣就可以得到一個 任意角度的箭頭。由于用到了旋轉和伸縮兩種變換，所以需要使用
transform: matrix(a,b,c,d,e,f) 這個變換矩陣。 這里的6個變量組成了一個3介的變換矩陣
$$ left[ egin{matrix} a & c & e b & d & f 0 & 0 & 1 end{matrix} ight] $$
任意點p(x,y)的平移， 旋轉， 伸縮變換以及他們的各種組合都可以通過這個變換矩陣做到：
$$ left[ egin{matrix} x y 1 end{matrix} ight] left[ egin{matrix} a & c & e b & d & f 0 & 0 & 1 end{matrix} ight]= left[ egin{matrix} x" y" 1 end{matrix} ight] $$
注：這里用齊次坐標 來表達一個點。 簡單說就是p(x, y) 表示為p"(x", y", 1)
v(x, y) 沿著x軸平移tx， 沿著y軸平移ty。 則有：
x" = x + tx y" = y + ty
所以平移矩陣：
$$ left[ egin{matrix} x" y" 1 end{matrix} ight]= left[ egin{matrix} 1 & 0 & tx 0 & 1 & ty 0 & 0 & 1 end{matrix} ight] left[ egin{matrix} x y 1 end{matrix} ight] $$
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(θ)
所以旋轉矩陣：
$$ left[ egin{matrix} x" y" 1 end{matrix} ight]= left[ egin{matrix} cos(θ) & -sin(θ) & 0 sin(θ) & cos(θ) & 0 0 & 0 & 1 end{matrix} ight] left[ egin{matrix} x y 1 end{matrix} ight] $$
假設x軸，y軸的伸縮率分別是kx， ky。 則有：
x" = x * kx y" = y * ky
所以：
$$ left[ egin{matrix} x" y" 1 end{matrix} ight]= left[ egin{matrix} kx & 0 & 0 0 & ky & 0 0 & 0 & 1 end{matrix} ight]= left[ egin{matrix} x y 1 end{matrix} ight] $$
如果是對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
如果箭頭的方向不是指向右側， 在進行一次旋轉就可以得到任意方向的箭頭。變換為M3
那么由于 p" =C(B(Ap)) ==> p" = (CBA)p, 我們就可以先計算出 M3M2M1，然后對div進行相應的變換，就可以得到任意角度， 任意方向的箭頭了。
div的width和height就是箭頭的邊長， 通過調整可以獲取任意邊長的箭頭。
React組件為了方便使用， 這個箭頭被封裝為了一個 React組件。git地址
| 簡單箭頭 | 模擬select | 發散箭頭 |
|---|---|---|
| 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 (
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115766.html
摘要：中文譯為轉換，但我更傾向于稱呼它變形大名鼎鼎的變形金剛叫。意為縮放，顧名思義，是用于改變元素的大小。每個時間點對應一個狀態，代表一個關鍵幀。我們可以在可視化的創建我們自己的貝塞爾曲線。 簡介 Animation可以讓你不用依賴javascript或jquery，用純CSS在網頁中輕松實現各種動畫效果。 兼容性 animation在絕大部分主流瀏覽器都得到了很好的支持！還在兼容IE9的同...
摘要：圖片預覽插件，支持圖片切換旋轉縮放移動瀏覽器支持不支持旋轉功能效果預覽源碼地址默認鍵盤操作方向鍵左右前后圖片切換，上下順時針逆時針旋轉滾動鼠標縮放支持自定義配置，詳見頁尾使用瀏覽器初始化參數見參數說明處使用方法點擊縮略圖，查 zx-image-view 圖片預覽插件，支持圖片切換、旋轉、縮放、移動... 瀏覽器支持：IE10+, (IE9不支持旋轉功能) 效果預覽：https://ca...
閱讀 1369·2021-10-13 09:39
閱讀 1333·2021-09-23 11:22
閱讀 2243·2019-08-30 14:05
閱讀 1059·2019-08-29 17:03
閱讀 770·2019-08-29 16:24
閱讀 2227·2019-08-29 13:51
閱讀 655·2019-08-29 13:00
閱讀 1290·2019-08-29 11:24
