raphael

问题 Using the following plugin and code you could wrap text where there is \n : Snap.plugin(function (Snap, Element, Paper, glob) { Paper.prototype.multitext = function (x, y, txt) { txt = txt.split("\n"); var t = this.text(x, y, txt); t.selectAll("tspan:nth-child(n+2)").attr({ dy: "1.2em", x: x }); return t; }; }); // And you can use it like this: var ttt = paper.multitext(100, 100, "Sample\nmultiline\ntext").attr({ font: "18px Arial", textAnchor: "middle" }); And it produces: http://jsbin.com

问题 I have this morris.js chart which I populated with random values (the ones provided in the exemple). Whereas it renders perfectly in localhost , once I upload on the production server it no longer works. Set up JS code new Morris.Line({ element: 'daily-chart', data: [ { y: '2006', a: 100, b: 90 }, { y: '2007', a: 75, b: 65 }, { y: '2008', a: 50, b: 40 }, { y: '2009', a: 75, b: 65 }, { y: '2010', a: 50, b: 40 }, { y: '2011', a: 75, b: 65 }, { y: '2012', a: 100, b: 90 } ], xkey: 'y', ykeys: ['a

问题 I am trying to copy paths from inkscape into Raphael (individual countries), the problem is the moveTo is way off, how do I make it display on the relatively correct position on the canvas? 回答1: If you're trying to draw a path on a canvas in a relative position, you need to transform all of the absolute coordinates to relative coordinates. I had the same problem recently and resorted to a calculator and paper (it was a short path, and wasn't worth it to attack programatically). There are a

问题 I am trying to create a directive for JustGauge in AngularJS. My html view is something like this: <div id="guageContainer" class="row" ng-controller="guageCtrl"> <gauge ng-repeat="ind in indicators" model="ind"></gauge> </div> and my directive is: angular.module("pgHome", []) .directive("gauge", function ($compile) { return { restrict: "E", scope: { model: "=model" }, compile: function (tElement, tAttrs, transclude) { tElement.append('<div id="{{model.Name}}"></div>'); return { post:

问题 Right now I'm having trouble getting a simple Raphael graphic to show in a extJS panel. afterRender: function(){ var size = Math.min(this.getHeight(), this.getWidth()); this.innerEl = this.el.createChild({ cls : 'ext-ux-clock-inner' }); this.canvas = Raphael(this.innerEl.dom, size, size); var circle = this.canvas.text(50, 40, 'test').attr( { font : '14px Helvetica, Arial', stroke : "none", fill : '#fff' }); TimelineWindowPanel.superclass.afterRender.apply(this,arguments); } The text shows up

问题 What I have: Text along a path made out of circle. It uses Raphael.js and a function called textOnPath (found here: Raphael JS Text Along path ): var pathTest = r.path(getCircletoPath(286, 322, radius)).attr({stroke:"#b9b9b9"}); textOnPath(message, pathTest, fontSize, fontSpacing, kerning, kerning, point, textFill, fontNormal, fontFamily); JSFiddle: http://jsfiddle.net/zorza/62hDH/1/ What I need: The text to be centered on top of the circle. My approach: Try to calculate where the text should

问题 I'm trying to figure out how to make rectangles with opacities that work on IE (FF/Chrome/Safari are all fine). I've tried creating a class in my CSS file .opacity60 { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } and then tried to create a rectangle using the following code: var rIn = Raphael("sideIn", "100%", "100%"); rIn.rect(0, 0, "100%", "100%").attr({fill:"black", stroke:"none", opacity:0.6 }); rIn.rect.node.setAttribute('class',

问题 i followed this tutorial to build a one handed clock <!-- language: lang-js --> window.onload = function(){ var canvas = Raphael("pane",0,0,500,500); canvas.circle(200,150,100).attr("stroke-width",2); canvas.circle(200,150,3).attr("fill","#000"); var angleplus = 360,rad = Math.PI / 180, cx = 200,cy =150 ,r = 85, startangle = -90,angle=15,x,y, endangle; for(i=1;i<=24;i++) { endangle = startangle + angle ; x = cx + r * Math.cos(endangle * rad); y = cy + r * Math.sin(endangle * rad); canvas.text

问题 I just wrote a javascript code for layering in raphaeljs it works perfectly on FF. But it doesn't on IE. The problem is IE returns null for nextSibling for any object. How does one use it correctly, or is there a nextElementSibling call in IE? Here is the code fragment I used to change the order of objects: n = items[selected_item_id].nextSibling.id; if (n != '') { items[selected_item_id].insertAfter(items[n]); } <div id="consarea"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width=

问题 I have some text being displayed and I am using the Raphael JS library. I want the 'firstname' text to be size 25px, but it is not working. I am passing in a JS variable to the Raphael part and maybe that is part of the problem. If anyone could help me I would appreciate it. <html> <head> <script src="raphael.js"></script> <script src="jquery-1.7.2.js"></script> <script type="text/javascript"> var string = "J\no\ne"; </script> </head> <body> Text: <input type="text" id="words" value="" />