在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 如何計(jì)算skew后的偏移長度？

如何計(jì)算skew后的偏移長度？

圖片描述

如何根據(jù)偏移角度和長寬計(jì)算左上角紅色頂點(diǎn)與綠色頂點(diǎn)之間的距離？

綠色部分

    width: 200px;
    height: 50px;
    position: relative;
    background: lightgreen;

紅色部分

    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: red;
    transform: skew(-20deg);
回答
編輯回答
乖乖噠

如圖，∠A，需要根據(jù)弧度 -20deg 轉(zhuǎn)化為 m°，這個(gè)請(qǐng)自行百度；
AB，通過計(jì)算兩個(gè)盒子 ele.getBoundingClientRect().left 的差，可以計(jì)算出來；
這兩個(gè)算出來后，后面的就按圖計(jì)算三角函數(shù)(sin/cos/tan/cot)吧，這其實(shí)是個(gè)數(shù)學(xué)題，
圖片描述

2018年3月29日 18:55
編輯回答
離夢(mèng)

抱歉周末不上社區(qū)，現(xiàn)在給你解答一下，不過需要點(diǎn)三角函數(shù)的知識(shí)。

圖片描述

先把問題轉(zhuǎn)化一下，就是根據(jù)高度h和角度α求長度s

圖片描述

那么我們根據(jù)三角函數(shù)定義可以列出公式：
圖片描述

默認(rèn)的話旋轉(zhuǎn)是以中心為原點(diǎn)的，所以有：
圖片描述

結(jié)合起來就是：
圖片描述

用js描述就是

var h = 50, a = 20, s;
var d2r = Math.PI / 180;        // 用于將角度轉(zhuǎn)換成弧度
s = h * Math.tan(a * d2r) / 2
2018年2月17日 02:27
編輯回答
旖襯

簡單寫了一個(gè)，如下

var height = 100;//這是方塊的高度
var transform = $('#xxx').css('transform');//xxx為紅色元素選擇器
var rate = transform.match(/matrix\([^)]*\)/g);
if (rate && rate[0]) {
  rate = rate[0].split(',')[2];
}
var distance = Math.abs(height*rate/2);//distance即為最后的水平偏移
2018年8月2日 06:46