如何使用 jquery 在窗口调整大小时缩放 Raphael js 元素 [英] How Can i scale Raphael js elements on window resize using jquery

问题描述

如何在窗口更改时重新缩放 Raphael 画布内的所有元素?

How can i rescale all the element inside a Raphael canvas on window change ?

考虑以下代码/DEMO 如果我只调整窗口大小 div 容器 缩放，因为我将其宽度设置为窗口宽度的 50%，并且 (rect 、 circle 或 path) 都没有变化

considering the following code / DEMO if i re-size my window only div container scaled since i set its width to 50% of the window width and none of the (rect , circle or path) change

代码

<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);

推荐答案

如果您使用 Raphaël 2.0 或更高版本，另一种方法是调用 paper.setViewBox 设置您的坐标系，然后让浏览器自动处理大小调整.

If you use Raphaël version 2.0 or later an alternative is to call paper.setViewBox to setup your coordinate system, and then let the browsers handle the resizing automatically.

更新: 好吧，事实证明 Raphaël 的自动扩展性比我想象的要差一些……无论如何，这是一个 example (raphaël 仍然在根 preserveAspectRatio 属性.

Update: Ok, turns out Raphaël is a bit less auto-scalable than I thought... anyway, here's an example (raphaël still sets an absolute width/height on the root <svg>, so they need to be removed for normal svg scaling to take place). The size is then decided by CSS, and the svg is just fit into the area given. It's possible to tweak this to deal with overflowing content, which can happen due to the svg viewBox aspect-ratio not matching the CSS box it's placed into. You do this by adding a preserveAspectRatio attribute to the root svg element.

您可以阅读有关可以在 svg preserveAspectRatio 属性 here，但可能感兴趣的三个值是 'none'(用于挤压/拉伸以适应给定的任何 rect)，'xMidYMidslice'(放大以填充矩形，如果方面不匹配，可能会剪掉一些部分)，'xMidYMid meet'(这是默认值，与不指定相同完全 pAR，意味着内容将居中，如果纵横比不匹配，则会向一个方向溢出).

You can read more about the values you can set on the svg preserveAspectRatio attribute here, but the three values that are probably of interest are 'none' (for squeezing/stretching to fit whatever rect is given), 'xMidYMid slice' (to scale up to fill the rect, possibly clipping away some parts if the aspect doesn't match), 'xMidYMid meet' (this is the default, same as not specifying pAR at all, and means the content will be centered and will overflow in one direction if aspect doesn't match).

这篇关于如何使用 jquery 在窗口调整大小时缩放 Raphael js 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！