Как создать градиентный объект с Рафаэлем - PullRequest
Новая
       39

Как создать градиентный объект с Рафаэлем

15 голосов
/ 22 февраля 2009

Я пытался использовать графическую библиотеку Raphael JS. Я хотел бы использовать атрибут градиента, который должен принимать объект. Документация говорит, чтобы ссылаться на спецификации SVG. Я нашел объект градиента в SVG, например 

<linearGradient id="myFillGrad" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="5%" stop-color="red" />
<stop offset="95%" stop-color="blue" stop-opacity="0.5" />
</linearGradient>

но как я могу сослаться на это из моего javascript? 

circle.attr("gradient", "myFillGrad");

не работает :) Заранее спасибо

Ответы [ 2 ]

19 голосов
/ 25 февраля 2009

ОБНОВЛЕНИЕ: Переписано для последней версии Raphael API: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Linear Gradient</title>
  <script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <script type="text/javascript" charset="utf-8">
    var paper = Raphael(10, 10, 800, 600);
    var circle = paper.circle(150, 150, 150);
    circle.attr({
      "fill": "90-#f00:5-#00f:95",
      "fill-opacity": 0.5
    });
  </script>
</body>
</html>

Документация для нового attr() API находится здесь .

6 голосов
/ 31 августа 2010

Я не верю, что текущий API-интерфейс Raphael позволяет вам устанавливать отдельные значения непрозрачности остановки, отличные от последней, которым присваивается значение, переданное атрибуту opacity, например: 

this.ellipse(x, y, r, r).attr({stroke: "none", fill: "r(.5,.1)#ccc-#ccc", opacity: 0})

... при последней остановке будет иметь непрозрачность стоп-кадра 0. Для более детального управления я добавил этот «случай» к переключателю синтаксического анализа атрибута в моем raphael.js: 

 case "opacityStops":
                            if (attrs.gradient) {
                                var gradient = doc.getElementById(node.getAttribute(fillString)[rp](/^url\(#|\)$/g, E));
                                if (gradient) {
                                    var stops = gradient.getElementsByTagName("stop");
                                    var opacs=value.split("-");
                                    for(var ii=0;ii<stops.length;ii++){
                                        stops[ii][setAttribute]("stop-opacity", opacs[ii]||"1");
                                    }
                                }
                                break;
                            }

Вы также должны добавить соответствующую запись в объект «availableAttrs», например: 

availableAttrs = {<other attrs here>..., opacityStops:"1"}

Вызов для создания круга с радиальным градиентом с различными остановками непрозрачности будет выглядеть следующим образом: 

this.ellipse(x, y, r, r).attr({stroke: "none", fill: "r(.5,.5)#fff-#fff:70-#000", "opacityStops": "1-0-0.6"}
...