Масштабирование образца заливки в raphael.js
-
11-09-2019 - |
Вопрос
paper=Raphael('previewBody',480,480);
paper.path({"stroke-width":1},'M0,0 L480,240 L480,480 L240,480 z')
.attr('fill','url(bg.png)'))
.scale(.5,.5,0,0);
Моя проблема в том, что заливка не масштабируется с помощью холста SVG, поэтому пропорционально она оказывается в два раза больше, чем была до масштаба пути.Есть ли простой способ масштабировать образец заливки вместе с остальной частью SVG?
Решение
Отметим, что это возможно сделать, используя только функции библиотеки Raphael.
Когда вы применяете функцию масштабирования к объекту Рафаэля, она создает новый узел svg с масштабированными координатами, но, к сожалению, она не изменяет свойства заливки.
В любом случае, когда вы добавляете атрибут «заполнить» URL-адресом, библиотека создает шаблон.Если это первый атрибут «заливки», который вы используете, этот шаблон называется raphael-pattern-0
следующий называется raphael-pattern-1
, и т. д...)
Зная это, можно изменить атрибут шаблона в соответствии с Спецификации SVG
Вы можете получить атрибуты шаблона с помощью document.getElementById("raphael-pattern-0")
и измените его свойства с помощью setAttribute
Например (в зависимости от того, что вы действительно хотите сделать), это может быть что-то вроде:
var pat = document.getElementById("raphael-pattern-0");
pat.setAttribute("height", pat.getAttribute("height")*0.5);
pat.setAttribute("width", pat.getAttribute("width")*0.5);
Вы также можете изменить x
, y
, patternUnits
и patternContentUnits
характеристики.
Надеюсь, он ответит на ваш вопрос.
Другие советы
Я не знаю почему, но моя версия библиотеки Raphael (я использую новейшую) не помещает идентификатор, как описано @ThibThib.Наверное, потому что сейчас 2013 год :)
Я также опубликую свое решение:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Raphael Test</title>
<script type="text/javascript" src="js/libs/jquery.js"></script>
<script type="text/javascript" src="js/libs/raphael.js"></script>
</head>
<body>
<div id="raphael"></div>
<script type="text/javascript">
$(document).ready(function() {
var raphael, path, pattern;
raphael = Raphael(document.getElementById('raphael'), 500, 500);
path = raphael.circle(200, 200, 180);
path.attr('stroke', '#000000');
path.attr('stroke-width', 3);
path.attr('stroke-opacity', 1);
path.attr('fill', 'url(http://3.bp.blogspot.com/_M4WdA9j-b-g/TLMF9JJJwcI/AAAAAAAAAV4/p0Y_Wo3S3sQ/s1600/Landscape1.jpg)');
pattern = $(path.node).attr('fill');
if(pattern) {
pattern = pattern.replace('url(', '').replace(')', '');
pattern = $(pattern);
}
// Shape element documentation: http://msdn.microsoft.com/en-us/library/hh846327(v=vs.85).aspx#shape_element
// Fill element documentation: http://msdn.microsoft.com/en-us/library/bb229596(v=vs.85).aspx
setTimeout(function() {
if(Raphael.vml) { // SVG not supported (IE7 & IE8) and it doesn't work :/
var html = $(path.node).html();
html = html.replace(/rvml:/g, ''); // remove prefix
html = html.replace(/ = /g, '=');
html = html.substr(html.indexOf('/>') + 2); // remove xml element
var src = '';
$(html).each(function() {
if($(this).prop("tagName") == 'FILL') {
src = $(this).attr('src');
}
});
if(src != '') {
var html = $(path.node).html();
html = html.replace(src, src + '" size="50,50');
$(path.node).html(html);
path.attr('stroke', '#000000');
path.attr('stroke-width', 3);
path.attr('stroke-opacity', 1);
}
}
else { // SVG supported and it prints correct URL
$(pattern)[0].setAttribute('width', 50);
$(pattern)[0].setAttribute('height', 50);
$(pattern).find('image')[0].setAttribute('width', 50);
$(pattern).find('image')[0].setAttribute('height', 50);
$(pattern).find('image')[0].setAttribute('preserveAspectRatio', 'defer none meet');
}
}, 1000);
});
</script>
</body>
</html>
Обратите внимание на несколько вещей:
доступ к изображению заливки VML описан здесь: Как получить доступ к изображению заливки Рафаэля в VML
после изменения размера изображения мне пришлось сбросить обводку для версии VML
по какой-то причине jQuery
.attr
у меня не сработало, поэтому я использовалsetAttribute
(Хром)я установил
preserveAspectRatio
для достижения того же эффекта, что и в VML.Вы можете отключить его, если хотите увидеть различия (см. документацию)setTimeout
используется для ожидания загрузки изображения, поскольку SVG устанавливал параметры после загрузки изображения и перезаписывал мое изменение размера
Конечно, вы также можете поиграть с разными настройками: