raphael | 易学教程

Raphael.js - if / else statement not toggling on click

阅读更多关于 Raphael.js - if / else statement not toggling on click

问题 I have 3 boxes and I want them to switch between them and also toggle off on a second click. Currently it switches between them fine (the IF part), but when I click on the same box to toggle it off if doesn't work (the "else if" part doesn't seem to work). I think I need to restructure the if-statement. Any help is greatly appreciated. Here is the JS fiddle: http://jsfiddle.net/FFdjS/5/ Here is one of the element's click if-statement: box1.click(function() { if (box1.attr(strOff)) { box1.attr

RaphaelJS hide shape onmouseout

阅读更多关于 RaphaelJS hide shape onmouseout

问题 I've created 4 rects using for loop. If you hover on any of these rects a rect will be displayed alongside. But the problem is that newly displayed rect doesn't hide on mouse out. What is wrong with my code? JS Fiddle window.onload = function() { var paper = Raphael(0, 0, 640, 540); function aa(h1,h2){ var showbox = paper.rect(h1+300,h2,100,100); } function ab(){ showbox.hide(); } for (i = 0; i < 2; i++) { for (j = 0; j < 2; j++) { (function(i, j) { var boxes = paper.rect(0 + (j * 100), 0 +

Raphael.js function getBBox give back NAN/NAN/NAN in IE8

阅读更多关于 Raphael.js function getBBox give back NAN/NAN/NAN in IE8

问题 using Raphaël 2.1.4 - JavaScript Vector Library do something like that: var textDummy = paper.text(50,500, 'hello world').attr({fill: 'transparent', 'font-size': 14}); var textBox = textDummy.getBBox(); with chrome and firefox everything is fine, but in IE8 it give back NaN/NaN/NaN, par exemple textBox.height is NaN. how i can fix this? 回答1: I had the same problem in Rapahel 2.2.0 and 2.2.1, and using ._getBBox() didn't fix it for me. What did fix it for me is falling back to .auxGetBBox() if

RaphaelJS - how to draw arrow-heads at the end of archs?

阅读更多关于 RaphaelJS - how to draw arrow-heads at the end of archs?

问题 I'm working on a project using raphaelJS, I'm trying to draw arrows at both ends of an arch and while I have the arch down, but it's hard to get arrows. Thanks in advance for any input! the issue: how do you draw arrows at the end of curved raphael lines? The mockup What I got so far, in a JS Fiddle The Body Tag <html> <body> <div id="arrows"></div> </body> </html> The Coffeescript/Javascript window.ready = -> $canvas = $('body').find '#arrows' paper = Raphael $canvas[0], 500, 500 WIDTH = 500

constrain within a triangle

阅读更多关于 constrain within a triangle

问题 I am looking for a generic piece of code (javascript) that would work with jquery UI to constrain movement(drag) of a div within an triangle. similar to this (http://stackoverflow.com/questions/8515900/how-to-constrain-movement-within-the-area-of-a-circle) but a triangle, and not a circle. I would prefer the triangle to be defined as a rapheal svg like this... (function() { Raphael.fn.triangle = function (cx, cy, r) { r *= 1.75; return this.path("M".concat(cx, ",", cy, "m0-", r * .58, "l", r

Library to generate SVG Path with Javascript?

阅读更多关于 Library to generate SVG Path with Javascript?

问题 I'm using Raphaël for my SVG rendering needs. But I find the Path syntax a little low-level. So does anyone know a nice wrapper/library for Javascript that allows something like this: var pathStr = move (10, 10).draw (5, 5) var path = paper.path(pathStr) 回答1: It may not be 100% complete, but this looks sort of like what you're looking for: https://github.com/DmitryBaranovskiy/raphael/blob/cuttingedge/plugins/raphael.path.methods.js 回答2: I strongly recommend d3.js. Creating a path that

Getting the raphael id attribute in the DOM

阅读更多关于 Getting the raphael id attribute in the DOM

问题 I have converted some SVG to Rapahel using http://readysetraphael.com/ Here is an example of code produced: ... path6233.attr({id: 'path6233' ... I have looked in the attr document and it doesn't mention id as a proper attribute. Neither is the id attribute added to the DOM. Is there some way to make raphael add this ID to the DOM so that I can style the element? Alternatively, can I somehow walk all the paths and add move the id attr to a real DOM ID easily? 回答1: I hadn't seen

Calculate intersection area of two paths

阅读更多关于 Calculate intersection area of two paths

问题 There is only a Raphael.pathIntersection(path1, path2) utility in Raphaël library, and this method can only get intersection points of these 2 paths. What I need is the intersection area . As the image below, the method only get 2 points (marked with red circles). I expect to have 2 other points (marked with blue circles.) at the same time to form an intersection area path. 回答1: The two points should be all you need. However I'm not sure why you want to intersect. Either you need to know the

SVG elements appears in DOM but are invisible on screen

阅读更多关于 SVG elements appears in DOM but are invisible on screen

问题 I try to draw a stave with SVG using Vexflow and Raphael.js and when I load the page the SVG elements appear in the DOM but they don't appear on the screen. I checked if there is any CSS rule which could hide the elements, but there isn't any.. Also checked on different browsers, different lib versions, nothing... Here is the SVG appearing in the DOM : <html lang="en"><head> <meta charset="utf-8"> <title>Fermata</title>  <script src="../deps/raphael/raphael-min.js"></script

merge images from Raphael svg

阅读更多关于 merge images from Raphael svg

问题 Trying to create Step 1 - Let users upload images through Ajax, Raphael and Raphael freetransform. Step 2 - Click button to show one image from merge upload images. (Question): I have found similar post about convert Raphael svg 1 2 3, so I'm using Canvg too but get console.log: Resource interpreted as image but transferred with MIME type text/html error: image "" not found . Please help me find how to solve it. or any clue how to reach same goal(convert several Raphael svg images from upload