Canvas.arcTo() 사용, 모서리가 둥근 선분 그리기, 마인드맵 기본 그리기
1. 방법 정의
canvas.arcTo이 방법은 여전히 상대적으로 이해하기 어렵습니다. 경로를 그리는 것이 직관적이지 않고 간접적이기 때문입니다.
그 매개변수는 다음과 같습니다.
canvas.arcTo(ax,ay,bx,by,radius)
두 점과 모서리 반지름으로 정의되는 호입니다. 그래서 당신은 확실히 이해할 수 없습니다. 다음 예를 참조하십시오.
2. 파라미터 설명
그림과 결합하여 이러한 매개변수의 의미를 설명합니다.
예를 들어 이러한 곡선을 그려야 합니다.
먼저 말씀드리자면 이 선은 3개의 선분으로 구성되어 있습니다:
2개의 arcTo()선분, 1개의 lineTo()선분
1. 선분 1 arcTo()
알기 전에는 첫 번째 선분이 다음과 같을 arcTo()것이라고 상상하지 못했을 것입니다 .arcTo()
위의 그림에 표시된 정보는 다음과 같습니다.
- 포인트 1은 경로의 원래 위치, 시작점입니다.
- 2시, 즉
ax,ay - 3시, 즉
bx,by - 이 필렛의 크기는
radius
점 1에서 점 2까지는 동작이 없고 lineTo(), 이 직선 + 호각의 선분은 에 arcTo()의해 완전히 생성된다는 점을 설명할 필요가 있다.
여기서는 abcd 점을 사용하여 1234점을 나타내고 점 1의 좌표는 ax,ay점 b 입니다.bx,by
canvas.arcTo(ax,ay,bx,by,radius)
2. 선분 2 arcTo()
그러면 첫 번째 끝에서 다음 선분을 arcTo()매개변수로 2점과 3점을 사용하여 연산 arcTo()하고 두 번째 선분을 생성합니다.
canvas.arcTo(bx,by,cx,cy,radius)
3. 선분 3 직선 lineTo()
마지막 직선은 직선이다.
canvas.lineTo(dx,dy)
셋째, 완전한 코드는
매개변수 설명에 따라 매개변수를 전달하기만 하면 이러한 선분을 얻을 수 있습니다.
/**
* 在 a 与 d 点之间线一条带圆角的拆线
* @param ctx canvas.context
* @param pointA 起点坐标 {x,y}
* @param pointD 末端坐标 {x,y}
* @param radius 圆角半径 Number
* @param lineWidth 线段宽度 Number
*/
function drawArcLine(ctx, pointA, pointD, radius, lineWidth){
ctx.strokeStyle = 'black'
ctx.fillStyle = 'black'
ctx.font = '24px 微软雅黑'
ctx.moveTo(pointA.x, pointA.y)
ctx.fillText(`${
pointA.x},${
pointA.y}`,pointA.x, pointA.y + 30)
// ctx.lineTo(pointA.x + (itemCenter.x - pointA.x) / 2 - radius, pointA.y)
ctx.fillText(`${
pointA.x + (pointD.x - pointA.x) / 2},${
pointA.y}`,pointA.x + (pointD.x - pointA.x)/2, pointA.y + 30)
ctx.arcTo(
pointA.x + (pointD.x - pointA.x) / 2,
pointA.y,
pointA.x + (pointD.x - pointA.x) / 2,
pointD.y,
radius
)
ctx.fillText(`${
pointA.x + (pointD.x - pointA.x) / 2},${
pointD.y}`,pointA.x + (pointD.x - pointA.x) / 2, pointD.y)
ctx.arcTo(
pointA.x + (pointD.x - pointA.x) / 2,
pointD.y,
pointD.x,
pointD.y,
radius
)
ctx.lineTo(pointD.x, pointD.y)
ctx.stroke()
}
4. 할 수 있는 일
결국 마인드맵처럼 이 효과를 얻을 수 있습니다.
2023-07-11
그 결과 실수로 지도를 만들었습니다.
2023-07-13
결과는 더 나아가
