Develop Reference

Joint js - animating circle along a path in svg

I am newbie in Joint js and also with limited javascript skills. What i am trying to acomplish is that when i click on Animate button, the animating circle should follow the path from start to end. It does follow path but not on line.
c = V('circle', {
r: 8,
fill: 'red'
});
var cylinderView = graph.getCell(reserved_path[player[i]]).findView(paper);
var cylinderPath = cylinderView.vel.findOne('path');
var cyclic = graph.getCell(jQuery("#"+player[i]).attr('model-id')).findView(paper);
var cylinderScalable = cyclic.vel.findOne('.scalable');
var cylinderScalableCTM = cylinderPath.node.getCTM().inverse();
c.animateAlongPath({
dur: '5s',
repeatCount: '1'
}, cylinderPath.node);
c.scale(2, 2);
cylinderScalable.append(c);
What i have understood is that cylinderScalable.append(c) line is creating this problem and it could be resolved if i could append the details directly into svg , but i don't know how to accomplish it
Here is my complete code: https://jsfiddle.net/9espjppv/
Thanks for all your help in advance.

Have a look at this doc, it might help you
var c = V('circle', { r: 8, fill: 'red' });
c.animateAlongPath({ dur: '4s', repeatCount: 'indefinite' }, paper.findViewByModel(myLink).$('.connection')[0]);
V(paper.svg).append(c);

How do I make a <ul> or bullet in fabric.Text()?

I am looking for an example application that takes user input and inserts it into a inside canvas with fabric.js. Is this possible? I haven't been able to find a lists in fabric.js example.

canvas.fillText does not accept HTML markup.
A Canvas is a bitmap, it has nothing to do with HTML markup.
You can control font style as described here.
There are libraries that convert XML markup into canvas.fillText calls, maybe you could adapt one.

I realized a better way to solve this issue was to draw a circle at the same height as the text, at radius 2, to emulate a bullet point. for anybody interested its easy as:
var EDU1 = new fabric.IText("SOME TEXT GOES HERE", {fontSize: 20, fontStyle:
'italic',fontFamily: 'Hoefler Text', left: 149, top: 390});
var bullet = new fabric.Circle({
radius: 2, fill: 'black', left: 135, top: 400
});
then group them together and you have a bullet point.

function ListStyle (textObject,type,canvas) {
var styles=['\u25CF','\u25C8','\u25D8','\u25BA','\u25CB','\u25A0','-'];
var allStyles={'bullet':'\u25CF','diamond':'\u25C8','invertedBullet':'\u25D8','triangularBullet':'\u25BA','disced':'\u25CB','squared':'\u25A0','dashed':'-','none':''};
var text = textObject.text;
var textArray = text.split('\n')
var tempStr = [];
textArray.forEach((text, i) => {
if(styles.includes(text.substr(0,1))){
tempStr.push(text.replace(text.substr(0,1),allStyles[type]));
}else{
tempStr.push(allStyles[type]+''+text);
}
})
textObject['text'] = tempStr.join('\n');
canvas.renderAll();
}
ListStyle (canvas.getObjects()[0],'diamond',canvas);

How to put image inside a circle with Raphael Js

I'm trying to put an image inside a circle but no success. This is my code:
//Elms.raphael() is my stage.
var circle = Elms.raphael().circle( 730, 200, 0 );
circle.attr( { fill : 'url(myImg.jpg)' } );
setTimeout( function()
{
circle.animate( { 'stroke' : '#000', r : 90, 'stroke-width' : '5' }, 300 );
}, 250 );
Instead of put the image in the circle It get colored with black ("#333"). I also tried to make an image-object but still doesn't work.
A little help please?

Another way to do, if you have separate image and want to bring it over you circle object.
This makes the whole image appear with smaller size that fits you circle. DEMO
var r = new Raphael(10,10, 500, 500);
var c = r.circle(200, 200, 80).attr({stroke: 'red', "stroke-width" : 3});
var img = r.image("http://www.eatyourcareer.com/wp-content/uploads/2012/06/ok-256x2561.png", 100, 105, 200, 200);

Here's a link to how I created a circle with an image in it:
jsfiddle
var paper = Raphael(document.getElementById("test"), 320, 200);
var circle = paper.circle(100, 100, 50);
circle.attr({
fill: 'url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-220px-SIPI_Jelly_Beans_4.1.07.tiff.jpg)'
});
I left the animate out entirely to keep it as basic as I could. It seems to work fine and is very similar to your code. If you cannot see it in the example it may be a browser issue.

Relatively Position Raphael Objects

I've been messing around with Raphael.js recently and I've run into a problem regarding the position of each Raphael object.
I want to create an arbitrary amount of 'canvases' but have them arranged within a div, already positioned on the page. I've been trying to figure out a way to get them to behave something like a block element, but haven't come up with an answer. Each new raphael object is placed outside of any div.
Here's the html:
...
#content{height:100%; width:980px; margin:0 auto;}
</style>
</head>
<body>
<div id="content"></div>
...
and the javascript:
var previews = [];
var prevSize = 25;
var spacing = 10;
//get container
var container = document.getElementById('content');
//get container width
var containerWidth = parseInt(getComputedStyle(container,"").getPropertyValue('width'));
var prevsPerRow =containerWidth/(prevSize+spacing);
var rowsPerPage = 20;
for(var y=0; y<rowsPerPage-1; y++){
for(var x=0; x<prevsPerRow; x++){
var preview = Raphael((x*prevSize)+(x*spacing), (y*prevSize)+(y*spacing),prevSize, prevSize);
previews.push(preview);
}
}
for(var x=0; x<previews.length-1; x++){
var temp = previews[x];
var rectangle =temp.rect(0,0,prevSize,prevSize);
rectangle.attr('fill','black');
}
One solution I was considering was simply adding the offset of the desired div to the x and y coords of the object, but this doesn't seem like the best solution.
Thanks for the help!
edit: Here is a jsfiddle to help elucidate exactly what I'm getting at.
http://jsfiddle.net/xpNBr/

Well, this is two years too late but I'm not seeing an answer here. So for posterity and future seekers: I'd use the element or element Id factory methods supplied by raphael as described here.
From that page:
// Each of the following examples create a canvas
// that is 320px wide by 200px high.
// Canvas is created at the viewport’s 10,50 coordinate.
var paper = Raphael(10, 50, 320, 200);
// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements)
var paper = Raphael(document.getElementById("notepad"), 320, 200);
// Same as above
var paper = Raphael("notepad", 320, 200);
// Image dump
var set = Raphael(["notepad", 320, 200, {
type: "rect",
x: 10,
y: 10,
width: 25,
height: 25,
stroke: "#f00"
}, {
type: "text",
x: 30,
y: 40,
text: "Dump"
}]);

You could use a different container for every newly created canvas.
Here is a working example, using the addCanvas function to create every new element:
http://jsfiddle.net/creaweb/KtNPS/5/
Note that the spacing between canvas blocks is defined in CSS, as well as their size.

moving custom font doesn't work

I'm trying to move a text via animation using raphael's print(), but it doesn't work:
var paper = Raphael(document.getElementById("stage"), 640, 480);
var text = paper.print(300, 200, "Test Text", paper.getFont("Yanone"), 50);
text.animate({
y: 400
}, 1000);
Anyone have ideas what I may be missing?

I think you should use the text function instead of the print function if you want to animate it later. I'm not sure why but it works ...
Here is an example with both ways of doing it:
var paper = Raphael("canvas", 640, 480);
var fonts = [0, paper.getFont("DIN")];
//using print
var p = paper.print(70, 150, "Custom fonts", fonts[1], 20).attr({fill: "#f00"});
//using text (font-family is the same as in getFont)
var t = paper.text(100, 150, "Custom fonts")
t.attr({"font-family": "DIN", "font-size":50, "opacity": 0.5});
t.attr({"fill": "#000"});
And on the second one you can do this for example :
t.animate({"font-size":40,"fill":"#0f0"},2000);
t.animate({"x":150},5000);