WPF에서 어떻게 베 지어 곡선의 섹션을 그릴 수 있습니까?

Question

작은 곡선의 화살표를 그릴 필요가 있습니다. 화살촉의 각도를 조정할 수 있으며 베 지어를 사용하여 경로 세그먼트를 정의하려고했습니다. 그러나, 실제로하고 싶은 것은 시작과 끝 사이의 보이지 않는 곡선 경로를 계산하고 시작과 끝 직전의 작은 거리에서 경로를 획 긋기 만하면됩니다.

이렇게하면 시작 지점과 끝 지점의 모든 개체 사이에 적절한 간격이 유지됩니다. 어떤 제안?

Answer 1

많은 머리가 긁힌 후 가능한 해결책을 찾았을 것으로 생각합니다. 베 지어 커브 A-B-C-D가 있다고 가정합니다. 여기서 B & C가 제어점이고 A & D 시작 및 끝점입니다. 그리고 당신은 시작하고 스탠드 오프 거리 A에서 X와 D 종료 할 : 전화 GetFlattenedPathGeometry 작은 세그먼트의 시리즈로 변환

초기 베 지어 생성

1. 을

2. Bezier의 길이를 얻기 위해 합쳐서 X에서 시작 부분과 끝 부분 길이 F를 구하십시오.

3. PathGeometry.GetPointAtFractionLength 원래 베 지어에 F 및 1-F로 전달합니다. 이

4. 을 사용하여 새 베 지어를 생성 대응하는 제어 포인트를 얻을 수있는 접선 벡터에 시작/종료 지점을 추가 시작/종료 지점과 단축 베 지어

5. 의 각 끝 부분에 대한 접선 벡터를 얻을 것입니다 이러한 점은 원래 시작점과 끝점을 X로 구분해야합니다.

이 접근법에 문제가 있습니까?

Answer 2

화살표는 일반적으로 매끄러운 커브를 가지고 있지 않으며, 부드러운 곡선을 가지고 있습니다. 끝 부분 근처의 값은 t입니다 (베 지어 함수는 시작 좌표에서 (1-t) ³에 의해 지배되기 때문에)

// let's say we want "10% away from the end" 
desiredDistance = 0.9; 

// then the guestimate for the "t" value is simply the cube root of 0.9 
probablyT = Math.pow(desiredDistance, 1/3); 

// and the point we want to cut at is at that "t" value 
cutPoint = get(probablyT, pts); 

// and we can split up the curve into two segments at that "t" value 
curves = split(probablyT, pts); 

// and then keep the segment we need for the arrow 
arrowcurve = curves[0]; 

: 당신이 "guestimate"는 "t"값이 큐브 루트를 사용하여이 필요 근처 좌표 얻기 위해 플러그인해야 할 수있는 끝 지점 근처에 있도록하고, 마지막에 t³에 의해) 좌표 이 점이 종점 근처의 거리를 대략 얼마나 잘 나타내고 있는지에 대해서는 http://jsbin.com/dovodibaze/edit?js,output을 참조하십시오 (그리고이 점이 명확하게 예상되는 종점 근처에서만 어떻게 작동하는지 =)

그 probablyT 값으로 원래의 커브를 나눌 수 있습니다. 원래의 t = 0에서 t = near-the-end 세그먼트까지 취한 "첫 번째"커브를 그린 다음 원래 종점.