亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

使用css實(shí)現(xiàn)任意大小，任意方向， 任意角度的箭頭

MorePainMoreGain / 2311人閱讀

摘要：使用實(shí)現(xiàn)任意大小，任意方向，任意角度的箭頭網(wǎng)頁(yè)開(kāi)發(fā)中，經(jīng)常會(huì)使用到下拉箭頭，右側(cè)箭頭這樣的箭頭。的和就是箭頭的邊長(zhǎng)，通過(guò)調(diào)整可以獲取任意邊長(zhǎng)的箭頭。

使用css實(shí)現(xiàn)任意大小，任意方向， 任意角度的箭頭

網(wǎng)頁(yè)開(kāi)發(fā)中，經(jīng)常會(huì)使用到 下拉箭頭，右側(cè)箭頭 這樣的箭頭。 一般用css來(lái)實(shí)現(xiàn)：

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

因?yàn)檫@是利用div的border-top, border-right，然后通過(guò)旋轉(zhuǎn)div來(lái)實(shí)現(xiàn)的。

任意角度的箭頭

這里有個(gè)問(wèn)題： 假如需要一個(gè)角度為120度的箭頭怎么辦呢？ 由于border-top, border-right一直是90度， 所以僅僅通過(guò)旋轉(zhuǎn)不行。
我們可以先把div 旋轉(zhuǎn)45度， 讓它成為一個(gè) 菱形 然后再伸縮，達(dá)到任意的角度， 這樣就可以得到一個(gè) 任意角度的箭頭。由于用到了旋轉(zhuǎn)和伸縮兩種變換，所以需要使用
transform: matrix(a,b,c,d,e,f) 這個(gè)變換矩陣。 這里的6個(gè)變量組成了一個(gè)3介的變換矩陣

$$ left[ egin{matrix} a & c & e b & d & f 0 & 0 & 1 end{matrix} ight] $$

任意點(diǎn)p(x,y)的平移， 旋轉(zhuǎn)， 伸縮變換以及他們的各種組合都可以通過(guò)這個(gè)變換矩陣做到：

$$ 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] $$

注：這里用齊次坐標(biāo) 來(lái)表達(dá)一個(gè)點(diǎn)。 簡(jiǎn)單說(shuō)就是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] $$

旋轉(zhuǎn)矩陣

v(x, y) 點(diǎn)繞原點(diǎn)旋轉(zhuǎn)θ到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(θ)

所以旋轉(zhuǎn)矩陣：

$$ 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] $$

伸縮矩陣

假設(shè)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] $$

復(fù)合變換

如果是對(duì)p(x, y)先平移(變換矩陣A)， 然后旋轉(zhuǎn)(變換矩陣B)， 然后伸縮(變換矩陣C)呢?

p" =C(B(Ap)) ==>  p" = (CBA)p //矩陣乘法結(jié)合率

現(xiàn)在任意角度o的箭頭就很簡(jiǎn)單了：

先把div旋轉(zhuǎn)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

如果箭頭的方向不是指向右側(cè)， 在進(jìn)行一次旋轉(zhuǎn)就可以得到任意方向的箭頭。變換為M3

那么由于 p" =C(B(Ap)) ==> p" = (CBA)p, 我們就可以先計(jì)算出 M3M2M1，然后對(duì)div進(jìn)行相應(yīng)的變換，就可以得到任意角度， 任意方向的箭頭了。

div的width和height就是箭頭的邊長(zhǎng)， 通過(guò)調(diào)整可以獲取任意邊長(zhǎng)的箭頭。

React組件

為了方便使用， 這個(gè)箭頭被封裝為了一個(gè) React組件。git地址

示例
簡(jiǎn)單箭頭 模擬select 發(fā)散箭頭
props
name type default description
degree number 90 箭頭的張角, 角度制
offsetDegree number 0 箭頭的方向，默認(rèn)指向右邊
color string - 箭頭的顏色
size string 10px 箭頭邊長(zhǎng)
安裝使用

npm install rc-arrow --save

import Arrow from "rc-arrow"

class Hw extends Component {
    render() {
        return (
            
        )
    }
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115766.html

相關(guān)文章

  • CSS3開(kāi)發(fā)文檔

    摘要：站點(diǎn)前端開(kāi)發(fā)文檔原文選擇器原文繼承屬性原文核心模塊原文盒子模型原文背景圖像原文清除浮動(dòng)原文定位選擇器并集對(duì)選擇器進(jìn)行分組，被分組的選擇器可以分享相同的聲明。用逗號(hào)將需要分組的選擇器開(kāi)分。 站點(diǎn)：前端開(kāi)發(fā)文檔原文：CSS選擇器原文：CSS繼承屬性原文：CSS3核心模塊原文：CSS盒子模型原文：CSS背景圖像原文：CSS清除浮動(dòng)原文：CSS定位 CSS選擇器 并集：對(duì)選擇器進(jìn)行分組，...

    gplane 評(píng)論0 收藏0

  • CSS3-線性漸變

    摘要：兼容性見(jiàn)參考二線性漸變漸變線通過(guò)函數(shù)可以創(chuàng)建線性漸變圖片。線性漸變是通過(guò)一個(gè)軸定義的，這個(gè)軸稱為漸變線。等價(jià)等價(jià)等價(jià)等價(jià)等價(jià)等價(jià)等價(jià)等價(jià)并且和直接距離為，不會(huì)漸變，如下圖參考線性漸變 一、漸變（gradient） 1.1 關(guān)于漸變 漸變表示從一種顏色平滑的過(guò)度到另一種顏色。它是圖片類型的一種，但是漸變類型圖片沒(méi)有尺寸，也沒(méi)有長(zhǎng)寬比。它的尺寸取決于被應(yīng)用的場(chǎng)景，比如作為元素的背景圖片時(shí)，...

    piglei 評(píng)論0 收藏0

  • 10分鐘入門(mén) CSS3 Animation

    摘要：中文譯為轉(zhuǎn)換，但我更傾向于稱呼它變形大名鼎鼎的變形金剛叫。意為縮放，顧名思義，是用于改變?cè)氐拇笮?。每個(gè)時(shí)間點(diǎn)對(duì)應(yīng)一個(gè)狀態(tài)，代表一個(gè)關(guān)鍵幀。我們可以在可視化的創(chuàng)建我們自己的貝塞爾曲線。 簡(jiǎn)介 Animation可以讓你不用依賴javascript或jquery，用純CSS在網(wǎng)頁(yè)中輕松實(shí)現(xiàn)各種動(dòng)畫(huà)效果。 兼容性 animation在絕大部分主流瀏覽器都得到了很好的支持！還在兼容IE9的同...

    Elle 評(píng)論0 收藏0

  • zx-image-view圖片查看插件-切換、旋轉(zhuǎn)、縮放、移動(dòng)

    摘要：圖片預(yù)覽插件，支持圖片切換旋轉(zhuǎn)縮放移動(dòng)瀏覽器支持不支持旋轉(zhuǎn)功能效果預(yù)覽源碼地址默認(rèn)鍵盤(pán)操作方向鍵左右前后圖片切換，上下順時(shí)針逆時(shí)針旋轉(zhuǎn)滾動(dòng)鼠標(biāo)縮放支持自定義配置，詳見(jiàn)頁(yè)尾使用瀏覽器初始化參數(shù)見(jiàn)參數(shù)說(shuō)明處使用方法點(diǎn)擊縮略圖，查 zx-image-view 圖片預(yù)覽插件，支持圖片切換、旋轉(zhuǎn)、縮放、移動(dòng)... 瀏覽器支持：IE10+, (IE9不支持旋轉(zhuǎn)功能) 效果預(yù)覽：https://ca...

    iOS122 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<