黃色點是錄屏軟體導致，本來是沒有的。。
// 1. 更改矩形位置if(
this
.state.moveflag))}
// 2. 清空畫布並繪製新的線
方法：兩直線相交
相似
import
;import react from
'react'
class
extends
react.component
}componentdidmount()
= e;
// 1. 更改矩形位置if(
this
.state.moveflag))}
// 2. 清空畫布並繪製新的線
this
._cleancanvas
((ctx)
=>}}
const circle =
, radius:3}
let res =
this
._around
(text, circle)
this
._drawnewline
(ctx, res)
;// this._drawnewline(ctx, pagex, pagey);})
;}}}
render()
=this
.state
return
(>
'circle'
/>
'canvas' width=
height=
/>
ref=
style=
} classname=
'text'
>
rpl10
onmousedown=
onmouseup=
classname=
'inside_circle'
/>
<
/div>
<
/div>);
}_mousedown
(e))
this
.circle.current.style.left =50}
_mouseup
(e))}}
_cleancanvas
(drawnewline)
_drawnewline
(ctx, linepoint)
_around
(text, circle)
;const centercircle =
const radius = circle.radius;
const endptdistcircle =3;
let lineseg =
, endpt:
}// 計算lineseq
// 1. 獲取正方形四個點,根據不同情況,判斷四點交點,計算起始點
const lefttop =
;const leftbottom =
;const righttop =
;const rightbottom =
// 2. 計算終點
// 2.1 計算兩個圓點之間的距離
let distance =
this
._distance
(centercircle, centerbox)
;let diffx =6*
(centercircle.x - centerbox.x)
/ distance;
let diffy =6*
(centercircle.y - centerbox.y)
/ distance;
if(centerbox.x < centercircle.x && centerbox.y < centercircle.y)
}else
if(centerbox.x < centercircle.x && centerbox.y > centercircle.y)
}else
if(centerbox.x > centercircle.x && centerbox.y < centercircle.y)
}else
if(centerbox.x > centercircle.x && centerbox.y > centercircle.y)
}return lineseg;
}/**
* 直線ab和直線cd的交點座標
*/_intersectionpoint
(a, b, c, d)
let x =
((b.x - a.x)
*(d.x - c.x)
*(c.y - a.y)
+(b.y - a.y)
*(d.x - c.x)
* a.x
-(d.y - c.y)
*(b.x - a.x)
* c.x)
/ denominator;
let y =-(
(b.y - a.y)
*(d.y - c.y)
*(c.x - a.x)
+(b.x - a.x)
*(d.y - c.y)
* a.y
-(d.x - c.x)
*(b.y - a.y)
* c.y)
/ denominator;if(
(x - a.x)
*(x - b.x)
<=0&&
(y - a.y)
*(y - b.y)
<=0&&
(x - c.x)
*(x - d.x)
<=0&&
(y - c.y)
*(y - d.y)
<=0)
}//否則不相交
return
false
}/**
* 求a、b兩點之間的距離
* @param a
* @param b
*/_distance
(a, b)
}export
React面試題 React的生命週期
掛載時 4個 更新時 5個 解除安裝時 1個 錯誤處理階段 2個 一共有12個鉤子。constructor props 初始化state。this.handleclick this.handleclick.bind this static getderivedstatefromprops nextp...
經典 必考 React高頻面試題
初始化階段 constructor 建構函式 getdefaultprops props預設值 getinitialstate state預設值 掛載階段 componentwillmount 元件初始化渲染前呼叫 render 元件渲染 componentdidmount元件掛載到 dom後呼叫 ...
經典面試題 memcpy實現
1說明 memcpy是記憶體拷貝的函式,給兩個位址和一定長度進行記憶體上的複製,不論什麼型別都能複製,並且有返回值 2用法char dest 20 char ss 13 hello world memcpy dest,ss,sizeof ss 3實現 不考慮記憶體覆蓋版本 void memcpy v...