raphael

Raphael: How to add onclick action that changes colour?

由 怎甘沉沦 提交于 2019-12-09 22:33:53
问题 Based on Raphael demo: http://raphaeljs.com/australia.html I have created objects that changes their colour. But I need to add action onclick will change it colour (to orange). And then it will stay orange until it will be clicked again. I want those objects to show selected state (by having different colour). If you click on object it changes colour. If you click again it goes back to normal. And again If you click it changes colour and shows that is selected. This is part of my code: var

Get y coordinate of point along SVG path with given an x coordinate

由 ε祈祈猫儿з 提交于 2019-12-09 16:45:12
问题 I am using raphael.js to draw a simple SVG line graph like this: When the user hovers the graph, id like to display a popover pointing to the line at the X position of the cursor, and at the Y position where the line is for that X position like so: I need to take the path and find the Y coordinate for a given X coordinate. 回答1: Based on @Duopixel's D3 solution, I wrote the following function for my own use, in pure javascript using DOM API: function findY(path, x) { var pathLength = path

Choosing right technology (SVG vs Canvas)

由 女生的网名这么多〃 提交于 2019-12-09 13:20:56
问题 I'm writing an app for shape manipulation, such that after creating simple shapes the user can create more complex ones by clipping the shapes against each other (i.e. combining two circles together into a figure 8 stored using a single path rather than a group, or performing intersection of two circles to create a "bite" mark), and am trying to decide on a graphics library to use. SVG seems to handle 80% of the functionality I need out of the box (shape storage, movement, rotation, scaling).

How do I apply CSS styles to Raphael.js objects using jQuery?

由 為{幸葍}努か 提交于 2019-12-09 09:46:51
问题 Does anybody have any experience with the Raphael.js SVG library? I'm using Raphael.js to create an SVG map (for use on smartphones) but I'm having trouble opening the map objects that Raphael creates up to outside interaction by jQuery and styling by css. var R = Array(); R[1] = new Raphael("level1", 408, 286); R[2] = new Raphael("level2", 408, 286); R[3] = new Raphael("level3", 408, 286); R[4] = new Raphael("level4", 408, 286); R[5] = new Raphael("level5", 408, 286); var attr = { fill: "

Raphael is adding a 'dy' attribute

由 白昼怎懂夜的黑 提交于 2019-12-08 21:45:49
问题 I Am creating an image with raphael and the SVG it generats for paper.text() adds a <tspan dy="number"> where "number" is a number based off the Attr(font-size:n) can someone tell me how this number is calculated as I need to know because what I send the serialized data to the server with toJSON() (a 3rd party plugin for raphael called ElbertF / Raphael.JSON) and recreate an SVG on the server the text is always out by this dy="number" the dy value also seems to be linked to the text's y

Raphael Moving Sets

由 别等时光非礼了梦想. 提交于 2019-12-08 14:31:27
I make a candlestick using two rectangles and making a set. Then I make 100 candlesticks and make that a set. When I try to move all 100 candlesticks, they either all move to one coordinate, or all move correctly, but the sticks all move to the edge of the candle. How can I move the whole set, but retain the inner transforms of the candlesticks? It is possible to "append" or "prepend" transformations to a set of Raphael objects using the forms "...Tx,y" and "Tx,y..." respectively. In your example, prepending will probably be more functional since you want the absolute movement of the set in

Get X,Y from LAT,LNG custom svg map

由 泪湿孤枕 提交于 2019-12-08 09:58:30
问题 Hi to all i'm developing a map with raphael.js as they do in here : http://raphaeljs.com/world/ the problem is that i'm using a custom svg world map so they function getXY() obviously wont return the correct x,y of a lat,lng. How can i calculate the x and y of a given lat/lng knowing the map width/height and the rapport froma point and his coordinates (x:1104.73=lng:42.998604)(y:559.25=lat:9.424553). they use this code: cx: lon * 2.6938 + 465.4 y: lat * -2.6938 + 227.066 but i cant figure out

Raphael — Changing the letter color of text string

由 ＊爱你＆永不变心＊ 提交于 2019-12-08 08:52:29
(using Raphael_2.01, WindowsXP, Firefox8.0.1) Hello, I'm trying to change the letter color of text by referring to "Drawing Text" of http://www.html5rocks.com/en/tutorials/raphael/intro/ . I can display the text "HTML5ROCKS" but I can't change the color. var t = paper.text(50, 10, "HTML5ROCKS"); var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Courier"), 40); // I think "Vegur" is Mac font. So I change it to "Courier". letters[4].attr({fill:"orange"}); for (var i = 5; i < letters.length; i++) { letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"}); } What

Font shadows using Raphaël—JavaScript Library

由 自作多情 提交于 2019-12-08 07:11:07
问题 I would like to put a shadow around any given text, or make the text more anti-aliased looking. For example lets say I'm running a simple text such as: var titleName = R.text(x+200, y-75, "Lorem Ipsoup de jour") .attr({font: '75px Helvetica, Arial', opacity: 1, fill: "#dfe6ec"}) The text is somewhat chunky looking at that size, and doesn't blend well against a background. Is there a way I can create a drop-shadow effect (with alpha channel, ideally)? 回答1: In SVG a text shadow effect isn't as

Raphael-GWT: fill image of a shape (Rect) appears offset. How to resolve this?

由 南笙酒味 提交于 2019-12-08 06:45:30
问题 I'm wondering about the behavior of {Shape}.attr("fill","url({image.path})") . when applying a fill image to a shape: public class AppMapCanvas extends Raphael { public AppMapCanvas(int width, int height) { super(width, height); this.hCenter = width / 2; this.vCenter = height / 2; ... Rect rect = this.new Rect(hCenter, vCenter, 144, 40, 4); rect.attr("fill", "url('../images/app-module-1-bg.png')"); // <-- ... } } The background image seem to teal accross the canvas behind the shape, thus gets
订阅 raphael