Откуда берется смещение в JavaScript Raphael?

StackOverflow https://stackoverflow.com/questions/1630176

  •  06-07-2019
  •  | 
  •  

Вопрос

Мне очень нравится библиотека Javascript Raphael, которая очень полезна для обработки 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;
};

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

Это было полезно?

Решение

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

  1. +num:получить значение переменной num как число;
  2. (~~num === num):вернуть true, если побитовое НЕ из побитового_НЕ значения переменной num (которое является числом с удаленной дробной частью, что эквивалентно Math.floor(num)) в точности равно значению переменной num:то есть вернуть true если число является целым числом, false в противном случае;
  3. добавьте результат шага 1 к результату шага 2, тем самым преобразуя логическое значение, возвращенное на шаге 2, в числовое значение:для случая, когда переменная num имеет числовое значение 0, это приведет к 1;
  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;

...и так далее.

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

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

Другие советы

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top