Рисование линий на холсте (как в Flash) (HTML5) - возможно? - PullRequest
Новая
       12

Рисование линий на холсте (как в Flash) (HTML5) - возможно?

11 голосов
/ 14 ноября 2010

Есть ли способ нарисовать линию, используя javascript и canvas с «лучшим» сглаживанием, как это делает Flash?

Я знаю трюк Math.floor (ordin) +0,5, чтобы получить ровно 1 пиксельную линию, когда вам это нужно, но я не это имею в виду. Следующие синие линии, нарисованные с использованием canvas, выглядят _ugly во всех браузерах , поддерживающих html5 и cavas, поэтому они, вероятно, используют один и тот же алгоритм сглаживания bad (вероятно, закодированный для скорости, а не для лучшего визуального впечатление). Это независимо от ширины линии (на самом деле, чем толще, тем страшнее):

1px скриншот синие линии обрезка:

alt text

и 3 пикселя:

alt text

Как видите, это не самый красивый способ рисования хороших сглаженных линий , и только нижняя линия выглядит хорошо. Клиент требует, чтобы приложение для работы с графиками, над которым я работаю, должно"хорошо выглядеть" и очень требовательно к эстетике POV и Я, вероятно, откажусь от решения HTML5 / Canvas и пойду в сторону Flash, если Я не могу решить эту проблему . Или, может быть, я мог бы написать хороший алгоритм сглаживания рисования линий в javascript (кто-нибудь может дать мне некоторые ресурсы для этого?) Извините, что не добавляю картинку с линиями, нарисованными во Flash, но дело в том, что они просто хорошо выглядят, сглаживание сделано правильно .

Ответы [ 3 ]

7 голосов
/ 14 ноября 2010

Вместо использования API 2D-рисования вы можете использовать векторные элементы SVG. Вы должны были бы реализовать свой собственный API для этого, но таким образом вы получите красивые линии, как те, что во флэш-памяти. SVG-edit является примером того, что вы можете сделать с SVN в браузере.

5 голосов
/ 15 ноября 2010

Проскальзывая от ответа Мариуса: 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
      xmlns="http://www.w3.org/2000/svg">

<rect width="100" height="50" y="37"
style="fill:none;stroke-width:1;
stroke:rgb(0,0,0)"/>

<rect width="100" height="50" x="200"
   style="fill:none;stroke-width:1;
   stroke:rgb(0,0,0)"/>

<line x1="50" y1="67" x2="250" y2="25"
   style="stroke:rgb(0,0,255);stroke-width:2"/>

<text x="2" y="50" >Beta</text>
<text x="201" y="13" >Omega</text>

</svg>

alt text

SVG можно нарисовать на стороне клиента с помощью javascript, поскольку это всего лишь элементы DOM. И, в будущем, это аппаратное ускорение.

3 голосов
/ 14 ноября 2010

Я сомневаюсь, что вы найдете что-нибудь, что сделает его по-настоящему хорошим, не слишком медленным, чтобы быть полезным. Одна вещь, которую вы можете попробовать, которая не сильно повлияет на производительность, это нарисовать 4 линии, наложенные друг на друга, каждое смещение на доли пикселя в x и y. Недостатком является то, что он будет выглядеть немного размытым.

...