raphael | 易学教程

Draw good-looking Bezier Curve through random points

阅读更多关于 Draw good-looking Bezier Curve through random points

问题 I'm using javascript with RaphaelJS to draw a smooth line through random points with output to SVG. The line goes strictly horizontally, without returning back in axis X. Currently, I'm using cubic Bezier curves to draw the line from one point to another. Problem is, the line doesn't look good enough. Two curves have an unsightly join at a point, where one curve ends and another curve starts, with quite random angle in the joint. How do I get the previous curve to transform into next one

How to make a pattern “fixed” in Raphael.js / IE?

阅读更多关于 How to make a pattern “fixed” in Raphael.js / IE?

问题 I'm creating a small tool to illustrate the benefits of polarizing lenses. Basically a user will drag the lenses (a Raphael.js path) over a dazzling scene (the CSS background of the container DIV) and "see through" the lenses. Here is the js code: var rsr = Raphael("playmask", 720,540); // Lens path var path_f = rsr.path("M0,73.293c0.024-39.605,17.289-53.697,35.302-61.34C53.315,4.312,99.052-0.012,119.011,0 c38.56,0.021,43.239,11.164,43.229,29.9c-0.002,3.45-0.76,28.632-16.349,58.949c-10.332,20

Raphael: How to add onclick action that changes colour?

阅读更多关于 Raphael: How to add onclick action that changes colour?

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 current = null; for (var state in bodyParts) { bodyParts[state].color = Raphael.getColor(); (function (st

How to draw a line based on mouse move using Raphael.JS

阅读更多关于 How to draw a line based on mouse move using Raphael.JS

I am trying to draw a line along with mouse move on a paper. I just know how to draw a line using path . But wanted to know if anyone have ideas to make drawing a line along with mousemove . Please help me on this. Here a link to such example using raphael Drawing with Raphael.(Credit:Jonas). (click view->source to see how its done...) And a jsfiddle that I did just in case ( just for back up ) It uses the drag and mousemove events of raphael over a rectangle element... 来源： https://stackoverflow.com/questions/10975886/how-to-draw-a-line-based-on-mouse-move-using-raphael-js

Raphael JS Pie: Add ID to path slices

阅读更多关于 Raphael JS Pie: Add ID to path slices

I've seen this question asked over at the Raphael Google Groups, but after hours of searching there, and also on here, and Google, I cannot seem to find a solution. I would simply like to be able to target my pie chart (svg path) slices using jQuery, but I cannot figure out how to add custom id's to the path tags - there is no ID attribute in there by default: <path fill="#764c29" stroke="none" d="M350,350L350.6911881148345,94.00093308961084A256,256,0,0,1,561.8463375189659,206.2741175716762Z" style="stroke-width: 1; stroke-linejoin: round;" stroke-width="1" stroke-linejoin="round"/> What would

Apply Hover event in Raphael on a set of paths

阅读更多关于 Apply Hover event in Raphael on a set of paths

问题 When I put a hover event on a raphael set, the efect is apply on every diffrent path. So, when I pass over the path, it changes the fill of that single path, not the fill of the whole set at the same time. For example, in this map, when you pass through canada with the mouse, the mainland changes its color, but all the ice islands stays on the same color. This is my code. drawSets: function(){ for (country in this.setsArr){ var setset= R.set(); var zone = this.setsArr[country]; for (group in

How to use eve() in Raphael?

阅读更多关于 How to use eve() in Raphael?

问题 Can some one give me a simple example of Raphael eve() ? I don't quite understand the parameters and how to call events. I was searching around for a bit but seem like not so many people have used it. 回答1: Simple example of the event functionality in Raphaël: We define the function that will fire the event function bar() { var a, b; a = 1; b = 2; eve("run-foo", "self", a, b); } The event listener function function foo(arg1, arg2, arg3) { // if the event is fired from bar() : // this == "self"

Scaling multiple paths with raphael

阅读更多关于 Scaling multiple paths with raphael

问题 I'm trying to use Raphael to create a map tool similar to this example in the webpage. I have an svg file of the map I want to use, and the provinces are all separate paths in the file. However, if I copy the coordinates form the svg file directly to a raphael path, the image is too large to fit the screen and therefore I need to scale it. I know I can use the scale function to scale all province paths individually, but then they will no longer be touching each other, and I'd have to move

Setting skew transformation center

阅读更多关于 Setting skew transformation center

For operations such as scale, rotate, Raphael.js provides individual methods, through which we can specify the origin of that transformation. But for skew there is no method like ele.skew(xskewAmount,yskewAmount,xtransfOrigin,ytransfOrigin) . So I went for the ele.transform method, like ele.transform("m1,0,.5,1,0,0") to perform a xskew . But I can't specify an origin here, so the element is getting translated incorrectly. I'm need of following info: Is there any method through which i can set the transform origin for skew how much distance will the element be translated(unwantedly), if i skew

Bootstrap carousel has conflict with morris.js chart?

阅读更多关于 Bootstrap carousel has conflict with morris.js chart?

I am using morris.js to plot charts and I would like to show these charts by bootstrap carousel, however Firefox stops responding if I do so. They can work well separately but will crash if being put together. firebug told me there is something to do with Raphael library, but I still cannot figure out. Anyone out there had bumped into the similar problem and know how to solve this? Thanks. Here is part of my code. <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data