Làm cách nào tôi có thể chia tỷ lệ phần tử Raphael js trên cửa sổ thay đổi kích thước bằng cách sử dụng jquery

Question

Làm cách nào tôi có thể rescale tất cả phần tử bên trong canvas Raphael khi thay đổi cửa sổ?

xem xét đoạn mã sau/DEMO nếu tôi thay đổi kích thước cửa sổ của tôi chỉ div container quy mô kể từ khi tôi thiết lập chiều rộng của nó đến 50% chiều rộng cửa sổ và không có sự thay đổi (rect, circle hoặc path)

MÃ

<div id="container"></div>​ 
#container{border : 1px solid black ; 
       width : 50% ; 
       height:300px}​ 
var con = $("#container"); 
var paper = Raphael(con.attr('id'), con.attr('width'), con.attr('height')); 
var win = paper.rect(0,0,400,300).attr({stroke: 'black' }) ; 
var path = paper.path("M 200 100 l 100 0 z") ; 
var cir = paper.circle(50, 50, 40); 

Answer 1

Nếu bạn sử dụng Raphaël phiên bản 2.0 hoặc mới hơn một sự thay thế là để gọi paper.setViewBox để thiết lập hệ tọa độ của bạn và sau đó cho phép các trình duyệt tự động điều chỉnh kích thước.

Cập nhật: Ok, quay ra Raphaël là một chút ít tự động mở rộng hơn tôi nghĩ ... dù sao, đây là một example (Raphaël vẫn đặt một chiều rộng tuyệt đối/chiều cao trên gốc < svg>, vì vậy họ cần sẽ được gỡ bỏ để mở rộng quy mô svg bình thường). Kích thước sau đó được quyết định bởi CSS và svg chỉ vừa với khu vực đã cho. Có thể tinh chỉnh điều này để xử lý nội dung tràn, điều này có thể xảy ra do tỷ lệ khung hình svg viewBox không khớp với hộp CSS được đặt vào. Bạn làm điều này bằng cách thêm thuộc tính preserveAspectRatio vào phần tử gốc svg.

Bạn có thể đọc thêm về các giá trị bạn có thể thiết lập trên svg preserveAspectRatio thuộc tính here, nhưng ba giá trị mà có lẽ quan tâm là 'none' (ví ép/kéo dài để phù hợp với bất cứ điều gì rect được đưa ra), 'xMidYMid slice' (để mở rộng quy mô để điền vào một số phần nếu khía cạnh không khớp), 'xMidYMid meet' (đây là mặc định, giống như không chỉ định pAR, và có nghĩa là nội dung sẽ được căn giữa và sẽ tràn theo một hướng nếu khía cạnh không không phù hợp).

Answer 2

Bạn có thể sử dụng kịch bản này một lần tôi đã sử dụng trước đó:

http://www.shapevent.com/scaleraphael/

Thanh Điền cửa sổ - không có ví dụ cắt cho thay đổi kích thước canvas:

http://www.shapevent.com/scaleraphael/demo1.html

Answer 3

tôi nghĩ rằng tôi tìm thấy một giải pháp: đoạn mã sau sẽ tái quy mô tất cả các phần tử khi lại kích thước cửa sổ, và đây là những gì tôi đang tìm kiếm

  var w = $(window).width(); 
      var h = $(window).height(); 
      function draw(w, h) { 
       var paper = Raphael($('#wrap').attr('id'), w, h); 
       paper.setViewBox(0, 0, 1500, 1500, true); 
       var rec = paper.rect(0, 0, 200, 200).attr({ stroke: 'black' }); 
       var cir = paper.circle(100, 100, 50); 
      }; 
      draw(w, h); 
      function resize() { 
       var xw = $(window).width(); 
       var xh = $(window).height(); 
       draw(xw, xh) 
      } 
      $(window).resize(resize); 

tham khảo từ @Erik Dahlström: Paper.setViewBox(x, y, w, h, fit)VÀ ‘viewBox’ attribute

Answer 4

http://jsfiddle.net/vnTQT/

var paper = Raphael("wrap"); 
    paper.setViewBox(0,0,w,h,true); 
    paper.setSize('100%', '100%'); 

Được sử dụng này (paper.setViewBox) với paper.setSize ('100%', '100%') và thay đổi kích thước cửa sổ với thay đổi kích thước của nội dung svg làm việc mà không cần sử dụng hàm svg direcly.

Answer 5

Nếu bạn có bộ phần tử để đổi kích thước, bạn có thể sử dụng trực tiếp mã js của mình ...

for (var i = 0; i < your_set.length; i++) { 
    your_set[i].scale(ratio, ratio, 0,0); 
}; 

... và một chức năng để tải lại trang web trên trình duyệt thay đổi kích thước:

window.addEventListener('resize', function() { 
    "use strict"; 
    window.location.reload(); 
});