-
最近產(chǎn)品上有個需求泣刹，需要用到類似轉(zhuǎn)盤控制方向的需求术健，如圖：
image.png -
開始的時候用的是div中position:relative 加子組件直接用切圖汹碱，position:absolute絕對定位，慢慢移動組合成圓盤荞估，切圖如果不精確咳促，很難組合成圓，效果不是很好勘伺，如圖:
image.png
實(shí)現(xiàn)輪盤轉(zhuǎn)盤就是畫圓和扇形跪腹，實(shí)現(xiàn)圓和扇形有兩種方式
- css實(shí)現(xiàn)
- svg實(shí)現(xiàn)
下面我所說的就是svg的形式
首先要知道svg的 A 指令：
| 參數(shù) | 描述 |
|---|---|
| rx | 橢圓長軸半徑 |
| ry | 橢圓短軸半徑 |
| xa | 橢圓與x軸的夾角 |
| lf | 所取的弧大小，1取大弧飞醉，0取小弧 |
| sf | 繪制弧線的方向冲茸，1順時針繪制屯阀，0逆時針繪制 |
| ex | 結(jié)束點(diǎn)的x坐標(biāo) |
| ey | 結(jié)束點(diǎn)的y坐標(biāo) |
- 然后是計算坐標(biāo)。我這個圓是等分8個扇形轴术。所以每個扇形是360/8=45度
- 我們需要計算這幾個數(shù):cos45和sin45的數(shù)值
- 拿第一個扇形路徑來舉例
<circle
cx="50"
cy="50"
r="48"
stroke="#02effb"
fill="transparent"
stroke-width="2"
></circle>
<path
d="M 50 50 L 50 3 A 45 45, 0,0,1,85.89 20.16 Z"
stroke="#085b8b"
stroke-width="1"
class="ctl-svg"
></path>
- circle中难衰， cx="50"cy="50" 原點(diǎn)50 50 以半徑 r="48" 畫圓
- M 50 50:從 x:50，y:50坐標(biāo)開始
- L 50 3 :畫一條直線 到終點(diǎn)坐標(biāo)x 50 y 3
- A 45 45, 0,0,1,85.89 20.16：橢圓長短軸 50 50 x軸夾腳0逗栽，0小弧(凸扇形)盖袭，1順時針，結(jié)束點(diǎn)坐標(biāo)x x 85.89 y 20.16
- Z 直線回到原點(diǎn)封閉
- 重點(diǎn)就是 結(jié)束點(diǎn)坐標(biāo)的計算彼宠，圓的半徑是48鳄虱，原點(diǎn)坐標(biāo)是50 50，a=48cos45凭峡，b=48sin45, x=50-a拙已，y=50-b，算出來大概的數(shù)摧冀。然后大概調(diào)整下
<div class="ball">
<svg
width="15"
height="15"
id="svg1"
style="
position: absolute;
top: 10%;
left: 41%;
width: 16%;
transform: rotate(150deg);
"
>
<!-- 白色箭頭-->
<path
d="M 0 15 L 0 0 A 15 15, 0,0,0,13 7.5 Z"
stroke-width="1"
class="ctl-ac"
></path></svg
><svg
width="15"
height="15"
id="svg3"
style="
position: absolute;
top: 37%;
left: 76%;
width: 16%;
transform: rotate(240deg);
"
>
<path
d="M 0 15 L 0 0 A 15 15, 0,0,0,13 7.5 Z"
stroke-width="1"
class="ctl-ac"
></path></svg
><svg
width="15"
height="15"
id="svg5"
style="
position: absolute;
top: 73%;
left: 44%;
width: 16%;
transform: rotate(330deg);
"
>
<path
d="M 0 15 L 0 0 A 15 15, 0,0,0,13 7.5 Z"
stroke-width="1"
class="ctl-ac"
></path></svg
><svg
width="15"
height="15"
id="svg7"
style="
position: absolute;
top: 46%;
left: 8%;
width: 16%;
transform: rotate(60deg);
"
>
<path
d="M 0 15 L 0 0 A 15 15, 0,0,0,13 7.5 Z"
stroke-width="1"
class="ctl-ac"
></path></svg
><svg
width="10"
height="10"
id="svg2"
style="
position: absolute;
top: 19%;
left: 65%;
width: 16%;
transform: rotate(195deg);
"
>
<path
d="M 0 10 L 0 0 A 15 15, 0,0,0,8.66 5 Z"
stroke-width="1"
class="ctl-ac"
></path></svg
><svg
width="10"
height="10"
id="svg4"
style="
position: absolute;
top: 63%;
left: 69%;
width: 16%;
transform: rotate(285deg);
"
>
<path
d="M 0 10 L 0 0 A 15 15, 0,0,0,8.66 5 Z"
stroke-width="1"
class="ctl-ac"
></path></svg
><svg
width="10"
height="10"
id="svg6"
style="
position: absolute;
top: 70%;
left: 22%;
width: 16%;
transform: rotate(15deg);
"
>
<path
d="M 0 10 L 0 0 A 15 15, 0,0,0,8.66 5 Z"
stroke-width="1"
class="ctl-ac"
></path></svg
><svg
width="10"
height="10"
id="svg8"
style="
position: absolute;
top: 24%;
left: 14%;
width: 16%;
transform: rotate(105deg);
"
>
<path
d="M 0 10 L 0 0 A 15 15, 0,0,0,8.66 5 Z"
stroke-width="1"
class="ctl-ac"
></path></svg
><svg width="100" height="100" transform="rotate(-22)">
<!-- 圓和扇形-->
<circle
cx="50"
cy="50"
r="48"
stroke="#02effb"
fill="transparent"
stroke-width="2"
></circle>
<path
d="M 50 50 L 50 3 A 45 45, 0,0,1,85.89 20.16 Z"
stroke="#085b8b"
stroke-width="1"
class="ctl-svg"
></path>
<path
d="M 50 50 L 85.89 20.16 A 45 45, 0,0,1,96.5 50 Z"
stroke="#085b8b"
stroke-width="1"
class="ctl-svg"
></path>
<path
d="M 50 50 L 96.5 50 A 45 45, 0,0,1,85.89 79.84 Z"
stroke="#085b8b"
stroke-width="1"
class="ctl-svg"
></path>
<path
d="M 50 50 L 85.89 79.84 A 45 45, 0,0,1,50 97 Z"
stroke="#085b8b"
stroke-width="1"
class="ctl-svg"
></path>
<path
d="M 50 50 L 50 97 A 45 45, 0,0,1,14.11 79.84 Z"
stroke="#085b8b"
stroke-width="1"
class="ctl-svg"
></path>
<path
d="M 50 50 L 14.11 79.84 A 45 45, 0,0,1,3 50 Z"
stroke="#085b8b"
stroke-width="1"
class="ctl-svg"
></path>
<path
d="M 50 50 L 3 50 A 45 45, 0,0,1,14.11 20.16 Z"
stroke="#085b8b"
stroke-width="1"
class="ctl-svg"
></path>
<path
d="M 50 50 L 14.11 20.16 A 45 45, 0,0,1,50 3 Z"
stroke="#085b8b"
stroke-width="1"
class="ctl-svg"
></path>
</svg>
</div>
<style>
.ball {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
margin-top: 7%;
margin-left: 5%;
}
.ctl-svg {
fill: #0a6d98;
fill-opacity: 0.3;
}
.ctl-svg:hover {
fill: #0a6d98;
fill-opacity: 0.8;
}
.ctl-ac {
fill: #red;
}
</style>
最終效果：
Untitled.gif
另:還有一種方式應(yīng)該也可以倍踪，畫出一個扇形，以扇形原點(diǎn)旋轉(zhuǎn)對應(yīng)角度索昂，也可以實(shí)現(xiàn)
