SVG 요소 위치 지정

Question

처음으로 SVG (Raphael 라이브러리 사용)를 가지고 놀면서, 나는 이라는 완전히 같은 방식으로 캔버스에 동적 요소를 배치 할 때 문제가 발생했습니다.이 포함되어 있습니다. 캔버스. 제가하려는 것은 무작위로 위치입니다. n 단어/짧은 어구입니다.

1. 은 처음에 아무 불투명도 점 0,0에서 텍스트를 작성 : 텍스트 변수이기 때문에

   는, 위치뿐만 아니라 내가 뭘하는지입니다 변수가 될 필요가있다.

2. text.getBBox().width을 사용하여 그려진 텍스트 요소의 너비를 확인하십시오.
3. 새 x 좌표를 Math.random() * (canvas_width - (text_width/2) - pad)으로 설정하십시오.
4. x 텍스트의 좌표를 새로 설정 한 값 (text.attr('x', x))으로 변경합니다.
5. 내 수학 통찰력에 한계가 있음을 인정하는 첫번째 일 1

에 텍스트의 불투명도 속성을 것입니다 설정하지만, 이것은 매우 간단 보인다. 어쨌든, 나는 여전히 캔버스의 오른쪽 가장자리를 벗어나는 텍스트로 끝납니다. 위의 단순화를 위해, Math.random() 결과에 추가하여 최소 x 값을 설정하는 비트를 제거했습니다. 그것은 거기에, 그리고 나는 캔버스의 최첨단에 동일한 문제를 참조하십시오.

Math.random() 비트는 0과 1 사이의 숫자를 생성하고 일부 숫자는 곱해질 수 있습니다 (내 경우 캔버스 너비 - 텍스트 너비의 절반 - 일부 임의의 패딩)을 사용하여 외부 바운드를 가져옵니다. 격자의 위치가 가운데에 설정되어 있기 때문에 텍스트의 너비를 절반으로 나눕니다.

나는 내가 너무 오랫동안이 쳐다 봤는데 희망,하지만 내 수학 그 녹슨 또는 나는이 솔루션의 후드의 Math.random(), SVG, 텍스트 또는 다른 어떤의 행동에 대해 뭔가 오해하고 ?

Answer 1

대답은 내가 Math.random() 방정식에 대해 어떻게 생각하는지 밝혀졌습니다. max를 곱한 다음 최소값을 더하는 것만 큼 간단하지 않습니다. 당신은 두 번해야

... 영어

var x = Math.random() * (canvas_w - 20 - (text.getBBox().width)) + (text.getBBox().width/2 + 10); 

: 그것은 더 그 시궁창의 절반을 먹고 전체 경계를 이동 한 후 컨테이너의 오른쪽 끝에 두 배 넓은 도랑을 수립하고 같은 정말 당신이 원하는 모든 요소의 너비 그래서 너는 그 넓이만큼 다시 넓혀서 일을 좋고 평등하게 유지할 수있다. 내 경우, 나는

는 500의 캔버스 폭, 텍스트 50의 폭과 원하는을 감안할 때 ... 텍스트의 폭을 더한 예를 들어

(10)의 패딩의 절반을 차지하려는 "거터"가 10 인 경우 0과 430 (500 - 20 - 50) 사이의 임의의 숫자를 만듭니다.텍스트 너비의 절반 (25) + 채우기 (10) - 나는 35과 465 사이의 난수로 남았습니다. 내 텍스트가 해당 경계의 바깥 쪽 가장자리에있는 경우 10 또는 490까지만 도달 할 수 있습니다.

이해하기에 충분할 것으로 기대하십시오. 생각할 때 그것이 의미가 있지만, 이런 종류의 일은 즉시 나에게 직관적이지는 않습니다. 그래서 저는 여기서 자주 언급 할 것입니다.