Откуда исходит смещение в JavaScript Рафаэля - PullRequest
Новая
       12

Откуда исходит смещение в JavaScript Рафаэля

1 голос
/ 27 октября 2009

Мне очень нравится библиотека Raphael Javascript, которая очень полезна для работы с SVG с помощью JavaScript.

Однако есть смещение, которое добавляется в сгенерированный SVG-код, который я не понимаю. Кто-нибудь знает, откуда он и как его избежать?

Вот мой код JS: 

var paper = Raphael("canvas", 510, 510);
paper.clear();
paper.rect(0, 0, 500, 500, 10).attr({fill: "#fff", stroke: "black"});

Сгенерированный код SVG 

<div id="canvas">
    <svg width="510" height="510">
        <desc>Created with Raphaël</desc>
        <defs/>
        <rect x="0.5" y="0.5" width="500" height="500" r="10" rx="10" ry="10" fill="#ffffff" stroke="#000000"/>
    </svg>
</div>

Почему атрибуты x и y в прямоугольнике равны 0,5, а не 0?

Обновление: кажется, что значения округлены с кодом ниже: 

var round = function (num) {
    return +num + (~~num === num) * .5;
};

Кто-нибудь знает причину?

Ответы [ 2 ]

6 голосов
/ 27 октября 2009

Выражение +num + (~~num === num) * .5 говорит:

  1. +num: получить значение переменной num в виде числа;
  2. (~~num === num): вернуть true, если значение bitwise-NOT для bitwise_NOT значения переменной num (которое равно num при удалении любого дробного компонента, эквивалентного Math.floor(num)) в точности равно значению переменная num: то есть, верните true, если num является целым числом, false в противном случае;
  3. добавляет результат шага 1 к результату шага 2, тем самым преобразуя логическое значение, возвращаемое шагом 2, в числовое значение: для случая, когда переменная num имеет числовое значение 0, это приведет к ;
  4. умножьте результат шага 3 на 0,5.

Итак, мы получаем результат (0 + 1) * 0.5, который равен 0,5.

Другими словами, код говорит: «Для всех целых чисел добавьте 0,5; для всех нецелых чисел ничего не добавьте».

Это имеет некоторые интересные результаты, цель которых, по меньшей мере, неясна; рассмотрим его применение для следующих значений:

  1. 0 -> 0.5;
  2. 0.1 -> 0.1;
  3. 0.4 -> 0.4;
  4. 0.5 -> 0.5;
  5. 0.9 -> 0.9;
  6. 1.0 -> 1.5;
  7. 1.1 -> 1.1;

... и т. Д.

Что касается , почему они делают это: у меня действительно нет ни малейшего представления. FWIW У меня есть большое количество SVG, как статических, так и динамически создаваемых, с удовольствием работающих на Firefox, Safari и Opera, и никому из них никогда не требовался этот вид глупости.

Если кто-нибудь когда-нибудь узнает причину этого, я хотел бы знать это: -)

2 голосов
/ 23 февраля 2011

Причиной может быть система координат, используемая для рисования: черная линия 1px, нарисованная при x = 1.0, является половиной слева от 1.0 и половиной справа от нее, в результате чего получается серая линия 2px. Со смещением 0,5px линия находится между 1,0 и 2,0.

...