สวัสดีเซวาน
ฉันพบคำตอบดีๆ จากผู้ชายชื่อเซวาน อย่างไรก็ตาม ฉันพบว่าโค้ดนั้นซับซ้อนเกินไปสำหรับความชอบของฉัน (ต้องใช้ jquery ทำสิ่งแปลก ๆ เช่น "$(this)" ฯลฯ )
ดังนั้นฉันจึงทำให้มันง่ายขึ้น ตอนนี้สั้นพอที่จะใส่ลงใน stackoverflow ;):
var paper;
window.ScaleRaphael = function(container, width, height) {
var wrapper = document.getElementById(container);
wrapper.style.width = width + "px";
wrapper.style.height = height + "px";
wrapper.style.overflow = "hidden";
wrapper.innerHTML = "<div id='svggroup'><\/div>";
var nestedWrapper = document.getElementById("svggroup");
paper = new Raphael(nestedWrapper, width, height);
paper.w = width;
paper.h = height;
paper.canvas.setAttribute("viewBox", "0 0 "+width+" "+height);
paper.changeSize = function() {
var w = window.innerWidth
var h = window.innerHeight
var ratioW = w / width;
var ratioH = h / height;
var scale = ratioW < ratioH ? ratioW : ratioH;
var newHeight = Math.floor(height * scale);
var newWidth = Math.floor(width * scale);
wrapper.style.width = newWidth + "px";
wrapper.style.height = newHeight + "px";
paper.setSize(newWidth, newHeight);
}
window.onresize = function() {
paper.changeSize();
}
paper.changeSize();
return paper;
}
ข้อเสียเปรียบเพียงอย่างเดียวจากเวอร์ชันของคุณคือต้องใช้ SVG แต่ไม่ได้ใช้ VML นี่เป็นปัญหาหรือไม่?
ฉันใช้มันกับหน้าสาธิตเวอร์ชันที่เรียบง่ายของคุณ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ScaleRaphaël Demo 1</title>
<meta charset="utf-8">
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="scale.raphael.js"></script>
<script type="text/javascript">
window.onload = function() {
var paper = new ScaleRaphael("wrap", 600, 400);
// draw some random vectors:
var path = "M " + paper.w / 2 + " " + paper.h / 2;
for (var i = 0; i < 100; i++){
var x = Math.random() * paper.w;
var y = Math.random() * paper.h;
paper.circle(x, y,
Math.random() * 60 + 2).
attr("fill", "rgb("+Math.random() * 255+",0,0)").
attr("opacity", 0.5);
path += "L " + x + " " + y + " ";
}
paper.path(path).attr("stroke","#ffffff").attr("stroke-opacity", 0.2);
paper.text(200,100,"Resize the window").attr("font","30px Arial").attr("fill","#ffffff");
}
</script>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
#wrap{
background-color: orange;
}
</style>
</head>
<body>
person
Community
schedule
13.06.2011
