Questions tagged [raphael]
Raphaël is a cross platform JavaScript library for outputting vector graphics in both standards compliant SVG (for Firefox, Chrome, Internet Explorer 9+ ...) and VML for older versions of Internet Explorer.
2,983
questions
0
votes
0
answers
26
views
How do I clone a Raphael paper object while keeping the original object's functions?
Currently, I have a paper.text object that can be dragged and cloned on the canvas, and when clicked, simply prints "clicked" into the console. The drag and clone is achieved by using ...
0
votes
0
answers
22
views
Save/load dynamically generated SVG content
I'm developing an application where users draw stuff on SVG dynamically with the use of RaphaelJS. JQuery & PHP are also involved. The stuff being drawn is pretty lightweight, just some paths and ...
1
vote
1
answer
44
views
How to know the m or M point of path from all of points in svg?(use raphael.js)
I have an svg picture like this, with M and m in the path. I use raphael.js to calculate. I can get all the points by calling Raphael.getTotalLength(path), but how can I know from which point is the ...
0
votes
0
answers
27
views
Object collision in Raphaeljs
I'm trying to create a replica of asteroids using Javascript where there are elements that are moving across the screen using the animate function and also a stationary object that is supposed to ...
0
votes
0
answers
36
views
Is there a possibilty for adding a scroll in a Raphael pie chart's legend?
I'm using a Raphael js library for creating charts on a web page, that I'm building.
When I create a pie charts with a large number of items, the legend with the items titles is being partly hidden, ...
0
votes
0
answers
21
views
how to add svg barcode in raphael js?
i am new to Raphael js,i am using js barcode in svg format because of good quality while print so i like to use both raphael and jsbarcode together .i want to merge raphael and jsbarcode svg into ...
0
votes
0
answers
55
views
Javascript setInterval "crashes" after a while?
I'm creating a 'bullet hell' style game, and have multiple setIntervals functions used to spawn enemies, one-ups, bullets, timers as well as setIntervals to measure collision between the different ...
0
votes
2
answers
42
views
select div by id using vanilla JS instead of JQuery $ selector to apply Raphaeljs method
I'm using RaphaelJs' mousedown() method. The problem is, I want to apply mousedown() on div which is being selected using $(id) selector of JQuery. I want to use vanilla Js for it because I don't want ...
2
votes
1
answer
53
views
Raphael Elements Undefined when Created in a Function?
I'm creating a mini game using Raphael elements that is meant to create a pop-up when the player bumps with the "bullet", and so far the code works accordingly if I create each elements ...
0
votes
0
answers
26
views
How can I make Raphael JS faster in IE 11?
I've inherited a Javascript application that has uses Raphael JS to draw a diagram. Drawing the diagram contributes very substantially to the loading time of the application. I thought that since ...
0
votes
1
answer
118
views
The rendering order of the React-raphael components (like z-index)
I want the Raphael-react components to be drawn in the order I need (to create different layers or something like z-index). How can I control the position of components "Path" on the "...
0
votes
1
answer
71
views
What is the Raphael.transformPath analogue in svg.js?
Raphael has a nifty function to transform one path to another:
R.transformPath = function (path, transform) {
return mapPath(path, toMatrix(path, transform));
}
Is there a similar function in ...
1
vote
1
answer
168
views
Check if points of path are overlapping circle
I'm using RaphaelJS to draw paths and circles, and I want to drag and drop a path so that both ends of the line/path are overlapping the circles.
How can I detect, when I drag a line/path is dragged, ...
0
votes
1
answer
474
views
How to add new element with svg-pan-zoom library?
I'm using a pan-zoom library for zooming SVG elements. When I try adding a new path after zoom it displays improperly according to the old coordinates. Here is the code - JSFIDDLE.
The problem may ...
0
votes
1
answer
17
views
Js Raphael object.animate call doesn't work
Hi I'm new to Js and I'm doing some simple moving of object with the Raphael library, but one of my functions doesn't work, even though it should.
Here's some of the code:
/*Moving Objects*/
var ...
-1
votes
1
answer
176
views
How to add ID to Raphael JS element on creation
I am working on the below demo. Why am I not able to add id sample to the object? I am trying to control the element style through css but it is not working
var paper = Raphael("container", 500, ...
1
vote
1
answer
79
views
Font Awesome icon in RaphaelJS
I'm trying to add a Font Awesome icon to a canvas in RaphaelJS.
Here is what I have so far: jsFiddle
canvas = Raphael('my-canvas', 100, 100);
var myIcon = canvas.text(50,50,'\uf056');
myIcon.attr('...
1
vote
2
answers
165
views
Need help extracting numbers from string in JavaScript
I need a rock solid RegExp to try and solve some issue with Raphael.js parseStringPath processing regarding Arc path commands and possible others (SnapSVG also inherits the problem). You see, arcTo ...
0
votes
1
answer
39
views
Node.js dynamic update Raphael path via socket.io
I have a Raphael path in a web page. Is there a way to change it dynamically with data coming from a socket.io event? I'm using node.js, express, ejs and socket.io.
<div id="canvas" class=...
0
votes
0
answers
87
views
JavaScript doesn't execute ajax call code sometimes
I am creating a gauge chart using Raphael.js.
I am using ajax to call a service that will return data that is to be shown in gauge chart.
My application has multiple HTML pages where this gauge chart ...
0
votes
1
answer
172
views
Uncaught TypeError: $(...).kumaGauge is not a function
I am using kuma-gauge.jquery.js to draw a gauge chart.
The js code is:
(function ( $, window, document, undefined ) {
var config = {
radius : 180,
paddingX : 25,
paddingY : ...
0
votes
0
answers
24
views
Listening to the coordinates of an animating element on Raphael
I am currently working on a small scale game for my project. My goal is for the 'player' to navigate through a group of enemies without touching them. To make the player die, I intend to listen for ...
3
votes
1
answer
76
views
How to draw a tower make of rectangles going from small to large using raphael graphics using a for loop?
I don't get how to draw a tower using a for loop 8 times?
so the end result will look like this
Here is what I Have
setup = function() {
paper = Raphael ('pyramid', 500,500)
for (i=1; i <= ...
1
vote
1
answer
662
views
Raphael with Angular 4+
I am trying to add Raphael to an Angular 4+ project. I have no idea where to start. Ideally I would want it added with types and all. I have looked at this but not managed to get it working.
A step ...
1
vote
1
answer
77
views
Avoid dragging unintentionally in Raphael
In this jsFiddle I have a Raphael canvas with a rect that can be clicked or dragged.
If you move the mouse to the rect and then click it, you may slightly move it (the text will show you that). I ...
0
votes
1
answer
73
views
Change a CSS style of Raphael text with javascript
I can change a CSS attribute of a Raphael text with jQuery like so:
var text = paper.text(10,10,'abc');
$(text.node).css('font-style','italic');
How can I do the same with just javascript and no ...
0
votes
1
answer
43
views
Setting double borders in Raphael with `setAttribute`
In this jsFiddle I have two SVG rects. The first one inside an SVG tag, the second one rendered with Raphael JS. Both rects should be identical with double borders, but they are not. Using node....
0
votes
1
answer
117
views
Detect snap to grid in Raphael only once per left coordinate
In this jsFiddle I have a Raphael canvas with a rect that can be moved around. The rect snaps to the vertical lines when it is moved to the left.
If you take a look at the console log, you will see ...
1
vote
1
answer
142
views
Dragging a rectangle in Raphael JS bounces back and forth
In this jsFiddle I have a Raphael JS grid with a rectangle that I need to move snapped to a grid. The rectangle has four red handles in each corner, and when it moves the handles move as well.
So far ...
0
votes
1
answer
114
views
Rect in Raphael JS doesn't have the same stroke width in all the sides
In this jsFiddle I have a Raphael JS paper with a rect. If you zoom in you will see that the bottom and right lines of the Raphael rect are wider:
How to fix this rect to have the same width in all ...
0
votes
1
answer
38
views
getting paper object when raphael is created with callback function
Hi I am a beginner with raphael and have question.
Whenever I create a raphael object with a callback function (like below), the paper object isn't returned by the call.
var w = 1000;
var h = 400;
...
1
vote
1
answer
252
views
Position mouse pointer on line/path in Raphael
In this jsFiddle I have a Raphael canvas with a line/path where the user can drag it.
Problem is that the exact top pixel of the mouse pointer has to be on the line to be able to drag it. I need ...
0
votes
1
answer
77
views
Scroll Raphael zoomed-in paper
In this jsFiddle I have a Raphael paper with two rects. I zoomed in the paper 200% by applying setViewBox.
The width of the rects (they have the same size) is 50px, and with the setViewBox function ...
-1
votes
1
answer
24
views
Align vertically two elements in Raphael
In this jsFiddle I hava a RaphaelJS canvas with a text and a rectangle where both should start at the same x/y coordinates (see that coordinates are 20/20 in both elements).
To align horizontally I ...
0
votes
1
answer
376
views
Using Morris Bar can't show
I am using Morris bar chart, I want to show bar:
This my Controller :
public function detail_grafik()
{
$row = $this->Tb_grafik_model->get_data()->result();
...
0
votes
0
answers
249
views
SVG animation freezes with multiple elements
I'm trying to use Raphael.js to animate an SVG path on a loop, but when I add more than 2 paths, the additional paths animating more than one time. It animates fine when I only have two paths, but as ...
1
vote
1
answer
474
views
Unable to retrieve the data/array behind Javascript chart using Selenium (headless)
I'm trying to webscrape the historical 'Market Value Dvelopment' chart on this website:
https://www.transfermarkt.com/neymar/marktwertverlauf/spieler/68290
After learning that it's javascript, I ...
1
vote
1
answer
66
views
Mouse coordinates appears to incorrectly place Raphael.js objects
I have some rect's on a Raphael space. I set up a quick mouse coordinate display for precise placement of objects:
document.addEventListener("mousemove",function(event){
var x = event....
0
votes
1
answer
107
views
How to make rect's disappear and re-appear using onclick buttons
I have some rectangles that I want to appear and then disappear using onclick buttons. However, the rect's never disappear.
I coded it so that when a certain button is pressed, some variables would ...
1
vote
0
answers
53
views
Collapsing svg group with Raphael.js
I'm working with svg through Raphael.js and I need to collapse SVG group and show it on click.
I've tried to use 'visibility' attriburte of SVG group and change it on click, but it is ok with hiding ...
0
votes
1
answer
385
views
Raphael.js responsive svg or div
I am a beginner in Raphael. I have this canvas
I want to make this div responsive. Is it possible to do it?
Actually I want to do that if caunting-line-video(image) changed location, I want to change ...
1
vote
0
answers
71
views
A way to bind the mousedown event on magnifier to Raphael Canvas
I have been working with Raphael to create guides on an image using the RaphaelJs Canvas. Have been able to create the guides successfully using RaphaelJS. The problem is that I need the magnifier as ...
0
votes
1
answer
49
views
How to use percent on Raphael js Paper.path?
Using Rephael js we can do something like:
paper.circle('20%', '20%', 30);
My question is: how can I do something like (note the use of %):
paper.path('M 20% 20% L 100 150');
0
votes
1
answer
558
views
Horizontal Scroll Bar For Morris Chart Bar Graph
I am using morris bar charts previously I had no issues regarding it but i decided to check it with large data set and now my graph looks like this
Bar Graph
I have searched number of platforms for ...
1
vote
2
answers
1k
views
Error: <tspan> attribute dy: Expected length, "NaN" - Raphael.js
I've got a lot of errors when hiding/showing object made in raphael.
I have a house made with raphael - when button clicked a gauge is shown and animating, if you click again the house is showing and ...
3
votes
4
answers
419
views
REPEAT onload animation onclick - Raphael Javascript SVG animation
I've been trying to make a raphael animation, it's working fine and animating on load as it should but..
I want it to animate AGAIN when clicking a text or button (a div outsite raphael paper).
...
1
vote
0
answers
20
views
Change Raphael cursor when not over object - just paper
In Raphael, I'd like to set the cursor shape when it is not over an element (but is over the Raphael paper. I still want it to change when hovering over certain elements as well.
I want the cursor ...
0
votes
1
answer
156
views
Whats wrong with my minimap implementation?
I need to create a minimap for my web-app, which shows where on the page you are now. To work with the canvas I'm using RaphaelJS library. So here my code.
Creating Raphael instance and setup two ...
0
votes
2
answers
830
views
Error: <tspan> attribute dy: Expected length, "NaN". | Error: <path> attribute d: Expected number, "M,0,0". | Raphael.js | wheelnav.js
I am trying to create circular menu with wheelnav.js library.
Even though it seems to work I get thousands of errors in chrome console.
Error: attribute d: Expected number, "M,0,0".
Error: ...
1
vote
1
answer
225
views
Unicode entity in menu item of wheelnav.js library (using under the hood raphael.js) [SVG]
Since wheelnav.js libray allows programmer to define menu item as text or image. Never both at the same time for one menu element, and I need icon + text I came up with encoding icon as a unicode ...