HTML5 - лучший способ отрисовки эллиптической дуги - PullRequest
Новая
       11

HTML5 - лучший способ отрисовки эллиптической дуги

1 голос
/ 21 сентября 2010

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

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

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

Во всяком случае, я нашел единственный способ сделать это - визуализировать линии для каждых 0,1 градуса по краю, что делает вычисления синусов и кос на точку и ужасно неэффективно. Это выглядит так (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;
}

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

1 Ответ

0 голосов
/ 21 сентября 2010

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

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

...