나는 주어진 여백에 타원을 둘러싼 베 지어 곡선을 그릴려고 :프로그래밍 베 지어 또는 타원형 경로 타원의 일부를 그리기 - SVG와 raphael.js
I을 이 프로그래밍 방식으로 달성하고 싶습니다, 그래서 만약 내가 타원 크기를 변경하면 커브가 따라옵니다. 나는이 기능을 만들어 놓은 순간
:function bezierPathTopRounded(ellipse, margin) {
var box = ellipse.paper.getBBox();
var leftX = box.x - margin;
var rightX = box.x + margin + box.width;
var y = box.y + box.height/2 - margin;
var p = "M "+ leftX + ", "+ y
+ " C " //could be relative too
+ (box.x - margin + (box.width/15) ) + ", " + (box.y + margin - (box.height/4.5) ) + " "
+ (box.x + margin + box.width - (box.width/15) ) + ", " + (box.y + margin - (box.height/4.5)) + " "
+ rightX +", " + y;
return p;
}
을하지만 그것이 어떤 타원으로 작동 할 수 있도록이 방향 점의 값을 계산하는 방법을 알아낼 수 없습니다 :
- box.width/15
- box.height는/4.5
는 fiddle with this example 있습니다.
간단한 해결책을 알아낼 수 없습니다 아직도 내가이 stackoverflow question을 읽어 봤는데, 내 예에서 동일한 시도했지만, 내가 '이제 ...
편집
을 무작위로 남아 타원형 A
RC와 함께 노력하고, 그 결과는 베 지어 패스보다 worser입니다 :
은 내가 사용하는 기능이있다. 내가 마진을 제거하면 정확하게 타원을 따라 간다. 마침내 이것이 문제는 타원을 여백으로 어떻게 따라갈 수 있는가이다.
function borderPath(ellipse, margin, flag) {
var flag = flag == undefined ? 1 : 0;
var box = ellipse.paper.getBBox();
var leftX = box.x - margin;
var rightX = box.x + margin + box.width;
var y = box.y + box.height/2;
y += (flag == 1) ? -margin : margin;
var rx = box.width/2 + margin;
var ry = box.height/2;
var p = "M "+ leftX + ", "+ y
+ " A "
+ rx + " " + ry
+ " 0 0 "+ flag +" "
+ rightX +", " + y;
return p;
}
updated fiddle here을 참조하십시오.
끔찍한 색깔에 대해 정말 유감입니다.
왜 베 지어 : 여기
는 기능입니다? 적절한 크기/위치의 다른 부분 타원을 그려 보지 않겠습니까? –당신은 타원형 호를 가진 meen입니까? 나는 이것을 전에 시도했지만, 마진 때문에 더 이상 완벽한 타원이 될 수 없었습니다. 그리고 나는이 특정한 노선을 그릴 수있는 길이어야합니다. – soyuka
예 타원형 호를 의미합니다. 동심원의 타원이 당신이 추구하는 효과를 내지 못할 수도 있다는 귀하의 요지를 보았지만 말입니다. 베 지어 곡선은 근사치 일 뿐이라고 생각합니다. 'box.width/15'와'box.height/4.5'는 어떻게 얻었습니까? 수학을 일반화하는 문제가 아닌가? –