js 畫兩點之間的連線

2021-10-01 21:47:06 字數 4599 閱讀 1232

案例根據兩點,計算出兩點之間的夾角,然後利用css3 旋轉的角度,畫出斜線

計算兩點之間位移

根據長的一條邊,乙個畫素乙個畫素的拆分為點,然後乙個乙個拼湊

0]// 獲得人物中心和滑鼠座標連線,與y軸正半軸之間的夾角

function

getangle

(x1, y1, x2, y2)

if(x2 > x1 && y2 < y1)

if(x2 === x1 && y1 > y2)

if(x2 < x1 && y2 < y1)

if(x2 < x1 && y2 === y1)

if(x2 < x1 && y2 > y1)

if(x2 === x1 && y2 > y1)

if(x2 > x1 && y2 > y1)

return angle;

}// 第乙個點的座標

let firstpoint =

// 第二個點的座標

let secondpoint =

// 計算出兩個點之間的距離

let line = math.

sqrt

(math.

pow(

(firstpoint.xpoint - secondpoint.xpoint),2

)+ math.

pow(

(firstpoint.ypoint - secondpoint.ypoint),2

))// 設定乙個div 寬度為 兩點之間的距離,並且以 transform-origin: 0 50% 為圓心旋轉,角度已經算出來

let linehtmlstr =

`$px;top:

$px;left:

$px;transform:rotate(

$deg);transform-origin: 0 50%;">`;

// 新增到body 後面

建立連線button

>

class

="point"

style

="top

:342px;

left

:513px

">

div>

class

="point"

style

="top

:450px;

left

:468px

">

div>

style

="position

:absolute;

border-top

: 1px solid red;

width

:117px;

top:342px;

left

:513px;

transform

:rotate

(112.61986494804043deg)

;transform-origin

: 0 50%;

" >

div>

body

>

>

document.

getelementbyid

("mybtn").

onclick

=function

(e);

function

createline()

; firstpoint.xpoint = event.pagex;

firstpoint.ypoint = event.pagey;

}else

; secondpoint.xpoint = event.pagex;

secondpoint.ypoint = event.pagey;}if

(firstpoint !==

null

&& secondpoint !==

null

)px;top:

$px;left:

$px;transform:rotate(

$deg);transform-origin: 0 50%;">`;

let bodydiv = document.

getelementsbytagname

("body")[

0];// 新增到body 後面

bodydiv.innerhtml = bodydiv.innerhtml + linehtmlstr;

document.

removeeventlistener

("click"

, createpoints);}

}// 計算連線

function

calcline

(firstpoint, secondpoint)

// 計算角度

// 獲得人物中心和滑鼠座標連線,與y軸正半軸之間的夾角

function

getangle

(x1, y1, x2, y2)

if(x2 > x1 && y2 < y1)

if(x2 === x1 && y1 > y2)

if(x2 < x1 && y2 < y1)

if(x2 < x1 && y2 === y1)

if(x2 < x1 && y2 > y1)

if(x2 === x1 && y2 > y1)

if(x2 > x1 && y2 > y1)

return angle;

}// 解決第一次繫結的時候執行方法

// settimeout(function() , 0);

}script

>

html

>

確定兩點之間的點

egret.point.interpolate 確定兩個指定點之間的點。引數 f 確定新的內插點相對於引數 pt1 和 pt2 指定的兩個端點所處的位置。引數 f 的值越接近 1.0,則內插點就越接近第乙個點 引數 pt1 引數 f 的值越接近 0,則內插點就越接近第二個點 引數 pt2 param...

計算兩點之間的距離

檔名稱 test.cpp 完成日期 2013年10月17日 版本號 v1.0 輸入描述 輸入兩個橫縱座標 問題描述 輸入兩個橫縱座標,求兩點之間的距離 程式輸出 兩點之間的距離 問題分析 通過輸入兩個橫縱座標,求兩點之間的距離 演算法設計 略 include includeusing namespa...

2025 兩點之間的距離

time limit 3 second memory limit 2 mb 輸入平面上兩點的座標,通過呼叫乙個計算兩點間距離的函式求出兩者的距離 兩行,第一行為某一點的座標x y,中間用空格隔開,第二行為另一點的座標x y,中間用空格隔開。一行,兩點間的距離,保留兩位小數 8.5 12.5 1 01...