Raphael Resize 너비

Question

시작하려면 이제 2 일 동안 Raphael을 사용하고 있다고 말하면서이 질문에 대한 답장을 보내지 마십시오. 그것은 완벽하게 확장 그래서 아래쪽 테두리가 <div> 폭을 기반으로 창을 확장하면

(아래 이미지가 조금 f'd 수 있습니다 :

나는 라파엘 다운과 같이 렌더링 드롭을 만들었습니다) :

점선은 (문제가 I) 지정된 % 일치하도록 라파엘 모양 (확장 다시 그리기 어떻게입니다) 그들이해야처럼 확장?

드로잉 부분 :

for (var i = 0; i < holder.length; i++) { 
    var paper = Raphael(title[i], title.slice(i, i + 1).width(), title.slice(i, i + 1).height()); //create new paper instance based on holder height and width 
    paper.setViewBox(0, 0, title.slice(i, i + 1).width(), title.slice(i, i + 1).height()); 
    var rect = paper.roundedRectangle(0, 0, title.slice(i, i + 1).width(), title.slice(i, i + 1).height(), 20, 20, 20, 20).attr({ //draw on paper rounded rectangle 
     fill: "#E6E7E8", //background color 
     stroke: "#ddd" //border color (technically shape color) 

    }); 
    var t = paper.text((title.slice(i, i + 1).width() - (title.slice(i, i + 1).width() - 20)), (title.slice(i, i + 1).height()/2), title_content.slice(i, i + 1).text()).attr({ //add text 
     "text-anchor": "start", //left-align 
     "font-size": 16, 
     "font-family": "Arial, Helvetica, sans-serif" 
    }); 
    textWrap(t, title.slice(i, i + 1).width()); //wrap text      
} 

나는 현재 크기 조정이있다, 그러나 그것은 작동하지 않습니다. 제품에 상태 표시 줄에 오류가 있지만 ie7 만 있기 때문에 방화범이 끌리고 콘솔을 읽을 수 없습니다. 내가 어디로 잘못 가고 있니?

$(window).resize(function() { 
    var i = 0; 
      $(title).each(function() { 
       paper.setSize($(this).width(), $(this).height()); 
       rect.SetSize($(this).width(), $(this).height()); 
       redraw_element(); 
       i++; 
    });     
}); 

---

업데이트 - 용기가 넓은 경우에도 짧은 렌더링 결과를 100 %로 설정.

---

var paper = Raphael(title[i], title.slice(i, i + 1).width(), title.slice(i, i + 1).height()); //create new paper instance based on holder height and width 

paper.setViewBox(0, 0, title.slice(i, i + 1).width(), title.slice(i, i + 1).height()); 

var rect = paper.roundedRectangle(0, 0, '100%', '100%', 20, 20, 20, 20).attr({ //draw on paper rounded rectangle 
    fill: "#E6E7E8", //background color 
    stroke: "#ddd", //border color (technically shape color) 
    width: '100%', 
    height: '100%' 
}); 

는

Answer 1

하지 않음이이 주어진 요구에 작동하는지 확인 을 렌더링,하지만 당신은 라파엘이 비율 기반 너비를 지원하는 것을 알고 계십니까? 예 : paper.rect(0, 0, '100%', '100%'). 크기를 조정할 때 <svg> 요소를 포함하는 요소의 너비를 변경하면됩니다 (사각형이 포함되어 있음). 그러면 사각형이 그에 따라 크기가 조정됩니다.

Answer 2

SetSize 대신 rect.attr({width:..., height:...}) (Element.attr 참조)을 사용해야합니다. 후자는 Raphael의 방법이 아니며 다른 브라우저에서 작동하지 않을 수도 있습니다.