CODEWITHSUNDEEP
jqueryfabricjs
Anil C
Anil C

Reputation: 1065

WordArt Style Text effects using jQuery

I am developing a Custom Designing Tool using jQuery similar to the one provided by http://www.design.neato.com/Designer.aspx?PaperId=2001

My requirement is to provide various effects to Text using jQuery (similar to Wordart in Microsoft Word). I have found one library fabric.js but it cannot fulfill my requirements. Once a Text is entered, I need to apply various styles as well as radius from the controls placed on the form. Is there any library which can help me in implementing the above functionality ? Can anyone suggest?

Upvotes: 1

Views: 624

Answers (1)

ptCoder
ptCoder

Reputation: 2247

Check this out: http://jsfiddle.net/e8hZy/146/

More demos here: http://fabricjs.com/demos/

More information about fabric.js text effects, please read this: http://fabricjs.com/fabric-intro-part-2/#text

Samples:

var shadowText1 = new fabric.Text("I'm a text with shadow", {
  shadow: 'rgba(0,0,0,0.3) 5px 5px 5px'
});
var shadowText2 = new fabric.Text("And another shadow", {
  shadow: 'rgba(0,0,0,0.2) 0 0 5px'
});
var shadowText3 = new fabric.Text("Lorem ipsum dolor sit", {
  shadow: 'green -5px -5px 3px'
});
var italicText = new fabric.Text("A very fancy italic text", {
  fontStyle: 'italic',
  fontFamily: 'Delicious'
});
var anotherItalicText = new fabric.Text("another italic text", {
  fontStyle: 'italic',
  fontFamily: 'Hoefler Text'
});
var textWithStroke = new fabric.Text("Text with a stroke", {
  stroke: '#ff1318',
  strokeWidth: 1
});
var loremIpsumDolor = new fabric.Text("Lorem ipsum dolor", {
  fontFamily: 'Impact',
  stroke: '#c3bfbf',
  strokeWidth: 3
});

I hope this help.

Upvotes: 2

Related Questions