Comment puis-je changer L'échelle des éléments Raphael js sur la fenêtre redimensionner en utilisant jquery
Comment puis-je redimensionner tous les éléments à l'intérieur d'un Raphael toile sur la fenêtre de changement ?
considérant le code suivant / DEMO si je re-taille de ma fenêtre div container échelle depuis que j'ai mis sa largeur jusqu'à 50% de la largeur de la fenêtre et aucun des (rect,circle ou path) changement
CODE
<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);
5 réponses
si vous utilisez Raphaël version 2.0 ou une version ultérieure, une alternative est d'appeler papier.setViewBox pour configurer votre système de coordonnées, puis laisser les navigateurs gérer le redimensionnement automatiquement.
mise à Jour: OK, il s'avère que Raphaël est un peu moins auto-évolutif que je le pensais... de toute façon, voici un exemple (raphaël fixe encore une hauteur / largeur absolue sur la racine
Vous pouvez en lire davantage sur les valeurs que vous pouvez définir sur le svg preserveAspectRatio l'attribut ici, mais les trois valeurs qui sont probablement d'intérêt sont 'none' (pour presser/étirements pour s'adapter quelle que soit rect), 'xMidYMid slice' (à l'échelle pour remplir le rect, éventuellement d'écrêtage à l'écart des pièces si l'aspect ne correspond pas), 'xMidYMid meet' (c'est la valeur par défaut, identique à ne pas spécifier du tout pAR, et signifie que le contenu sera centré et débordera dans une direction si l'aspect ne correspond pas).
var paper = Raphael("wrap");
paper.setViewBox(0,0,w,h,true);
paper.setSize('100%', '100%');
Utilisé cette (sur papier.setViewBox) avec du papier.setSize('100%', '100%') et redimensionner la fenêtre avec redimensionner le contenu svg sans utiliser les fonctions svg directement.
je crois que j'ai trouvé une solution : le code suivant sera de nouveau l'échelle de tous les éléments lors de la réorganisation de la taille de la fenêtre , et c'est ce que je cherchais
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);
référence de @Erik Dahlström : Papier.setViewBox (x, y, w, H, fit) et attribut’ viewBox'
Vous pouvez utiliser ce script une fois que j'ai utilisé avant :
http://www.shapevent.com/scaleraphael/
Checkout Remplir la fenêtre - pas de coupure exemple pour le redimensionnement de la toile :
Si vous avez un ensemble d'éléments pour redimensionner, vous pouvez utiliser directement dans votre code js ...
for (var i = 0; i < your_set.length; i++) {
your_set[i].scale(ratio, ratio, 0,0);
};
... et une fonction pour recharger la page sur le redimensionnement du navigateur:
window.addEventListener('resize', function () {
"use strict";
window.location.reload();
});