Raphael JavaScript에서 오프셋은 어디에 있습니까?

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

  •  06-07-2019
  •  | 
  •  

문제

JavaScript로 SVG를 처리하는 데 매우 유용한 Raphael 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이 아닌 0이 아닌 이유는 무엇입니까?

업데이트 : 값은 아래 코드와 함께 반올림 된 것 같습니다.

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

그 이유를 아는 사람이 있습니까?

도움이 되었습니까?

해결책

표현식 +num + (~~num === num) * .5 말하는 것 :

  1. +num: 변수의 값을 얻으십시오 num 숫자로;
  2. (~~num === num): 변수 값의 비트 와이즈-비트가 아닌 경우 true를 반환합니다. num (분수 구성 요소가 제거 된 상태에서 NUM입니다. Math.floor(num))은 변수 NUM의 값과 정확히 동일합니다. true NUM이 정수 인 경우 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;

...등등.

에 관해서 왜 그들은 이것을합니다 : 나는 정말로 가장 희미한 아이디어를 얻지 못했습니다. fwiw 나는 정적 및 동적으로 생성 된 많은 양의 SVG를 가지고 있으며 Firefox, Safari 및 Opera에서 행복하게 일하고 있으며, 이런 종류의 어리 석음은 필요하지 않았습니다.

누구든지 그 이유를 알게된다면, 나는 그것을 알고 싶다 :-)

다른 팁

그 이유는 드로잉에 사용되는 좌표 시스템 일 수 있습니다. x = 1.0으로 그려진 1px 검은 선은 1.0의 절반이고 오른쪽의 절반이므로 2px 회색 선이 생깁니다. 0.5px 오프셋으로 라인은 1.0에서 2.0 사이입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top