2010-09-21 4 views
1

Я использую HTML 5 для рендеринга эллиптических круговых диаграмм в каждом разделе; используя путь, начинающийся от центра, к краю, через его дугу и обратно в центр, который затем заполняется.HTML5 - лучший способ визуализации эллиптической дуги

Если бы они были идеально круговыми, я мог бы использовать функции дуги или дуги, но поскольку они эллиптические, внешние кривые всегда будут иметь переменный радиус.

Это эти внешние кривые, которые я пытаюсь понять, как рисовать. Я не могу взломать математику достаточно, чтобы узнать, отвечают ли квадратичные или безьевые кривые, но они могут быть.

Как бы то ни было, единственный способ, которым я нашел это, - визуализировать линии на каждые 0,1 градуса по краю, что делает вычисления синуса и cos для каждой точки и ужасно неэффективно. Он выглядит следующим образом (javascript):

while (arcAng <= curAng + dTheta) { 
    this.parent2d.lineTo(this.left + (this.width/2) + (this.width/2) * Math.cos(arcAng * (Math.PI/180)), 
    this.top + (this.height/2) + (this.height/2) * Math.sin(arcAng * (Math.PI/180))); 
    arcAng += 0.1; 
} 

Может ли кто-нибудь сказать мне наиболее эффективный способ сделать это?

+0

Возможный дубликат [Как нарисовать овал в холсте html5?] (Http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas) – sje397

+0

По существу то же самое да, но только с дугой в эллипсе между двумя точками. –

+0

Эллиптическая кривая - это нечто совершенно другое, с приложениями в криптографии с открытым ключом. – starblue

ответ

0

Самый простой способ - просто применить преобразование ко всей партии.

Я использовал только свойство позиции и ширины x, чтобы отобразить круг (как если бы он находился в идеальном квадрате), и применил масштаб x, y (1, высота/ширина).

Смежные вопросы