計算一點繞另一點旋轉n度后的坐標（親測）

Doyle 發布于2019-08-23 18:17 / 3588人閱讀

摘要：遇到問題先網上找一找因為自己已經忘完了，搜到好幾個如下的答案一假設點為圓心原點，則有計算公式其中順時針旋轉為正，逆時針旋轉為負，角度是弧度值，如旋轉度轉換為弧度為。二若不是原點，則可先將點坐標轉換為相對坐標計算，計算結果再加上點坐標。

遇到問題先網上找一找（因為自己已經忘完了……），搜到好幾個如下的答案：
一、

假設o點為圓心(原點0,0)，則有計算公式：

b.x = a.xcos(angle) - a.ysin(angle)

b.y = a.xsin(angle) + a.ycos(angle)

其中順時針旋轉為正，逆時針旋轉為負，角度angle是弧度值，如旋轉30度轉換為弧度為：angle = pi/180 * 30。

二、

若o不是原點，則可先將a點坐標轉換為相對坐標計算，計算結果再加上o點坐標。

參與計算的a點坐標實際應為 a - 0,由此得出最終計算公式如下：

b.x = ( a.x - o.x)cos(angle) - (a.y - o.y)sin(angle)

b.y = (a.x - o.x)sin(angle) + (a.y - o.y)cos(angle)

上面的內容是引用其他朋友的說明，結果坑了我半天，都是沒做實驗的吧，
直接上正解：
前面的步驟都是對的，但是！重點來了！！！！，最終還要加上中心點的坐標橫縱坐標即：

b.x = ( a.x - o.x)cos(angle) - (a.y - o.y)sin(angle) + o.x

b.y = (a.x - o.x)sin(angle) + (a.y - o.y)cos(angle) + o.y

GPU云服務器云服務器哪些云vps好一點哪里云主機便宜一點哪些云主機好一點哪里云vps便宜一點

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104962.html

移動端圖片上傳旋轉、壓縮的解決方案

摘要：上傳的文件經過就可以實現預覽圖片了，這方面不清楚的可以查看進階系列文件上傳下載旋轉旋轉需要用到的方法。前言在手機上通過網頁 input 標簽拍照上傳圖片，有一些手機會出現圖片旋轉了90度d的問題，包括 iPhone 和個別三星手機。這些手機豎著拍的時候才會出現這種問題，橫拍出來的照片就正常顯示。因此，可以通過獲取手機拍照角度來對照片進行旋轉，從而解決這個問題。 Orientatio...

blair 2019-08-20 17:38 評論0 收藏0
基于javascript的拖拽類封裝

摘要：參考了很多別人寫的代碼，最后終于弄明白了其中的原理，自己也寫了一個。效果圖如下地址如下拖拽類封裝代碼使用方法引入和對應的。如果沒有為的結構，就創建。鼠標移動時，記錄再次計算鼠標位置距離中心位置的的反正切函數。在公司做一個h5編輯平臺，中間需要對元素進行拖拽、放大縮小、旋轉等操作，且需要對文本、圖片、音樂組件等不同元素都可以具備這些功能。參考了很多別人寫的代碼，最后終于弄明白了其中的原...

afishhhhh 2019-08-26 13:49 評論0 收藏0
巧妙使用transform實現環形路徑平移動畫

摘要：參考環形路徑平移的方案，做一些調整，就可以得到型路徑平移的寫法這里初始把元素放在了上面那個半圓環的圓心，然后在的關鍵幀位置切換為下面的半圓環路徑。最近在CSS Secrets一書看到了這樣一節：讓一個元素沿環形路徑平移。這是一個css動畫的問題，但卻沒有看上去那么簡單，其關鍵點是元素是平移的，也就是說，元素自身并不發生旋轉，只是穩定地沿著一個環形的路徑移動，像這樣： showImg(...

KevinYan 2019-08-29 11:31 評論0 收藏0