Develop Reference

Animate icon in GoJS

I have a graph with nodes that contains icons:
$(go.TextBlock, {
font: '18pt Material Icons', alignment: go.Spot.LeftCenter, stroke: '#FFFFFF',
margin: new go.Margin(0, 5, 0, -34),
},
new go.Binding('text', 'statusIcon')),
I would like to rotate statusIcon infinitly but only if statusIcon matchs a value.
I have looked how to add a css rule like this.
font: '18pt Material Icons', alignment: go.Spot.LeftCenter, stroke: '#FFFFFF',
margin: new go.Margin(0, 5, 0, -34),animation:'spin 4s linear infinite';
But I get an error
Trying to set undefined property "animation" on object: TextBlock
I suppose that only few css rules are accepted by gojs TextBlock.
How can I add animation to only a node sub element ?

I created a StackBlitz example here.
$(go.TextBlock, {
font: '18pt Material Icons', alignment: go.Spot.LeftCenter, stroke: '#FFFFFF',
margin: new go.Margin(0, 5, 0, -34),
},
new go.Binding('text', 'statusIcon'),
new go.AnimationTrigger("angle")),
animate() {
this.dia.commit(diag => {
var node = this.dia.nodes.first();
var textblock = node.findObject("TEXTBLOCK_TO_ROTATE");
textblock.angle = textblock.angle + 30;
});
}
Animation is not a property like you used above. If you want to rotate, you should use AnimationTrigger and angle property for that.
I made a simple example to use GoJS animation, you can apply the codes from node template of TextBlock and the method to animate as you wish.
For more information, you can follow the description and the examples here.

Text's `fill` color is overriden by `stroke` in Konva

I have some Konva Text node, whose fill attribute is set to black and stroke is set to some other color.
In my canvas it looks as expected. The problem happens when I convert the canvas to base64 image to download it as an image file - in that case the downloaded image looks like in the screenshot below:
(the canvas is on the left side, the right one is the downloaded image)
As you can see, the stroke color is applied to the text's own color as well.
I created a Codesandbox example with a Text node that has the same attributes as in my environment, here is how that node is created:
const text = new Konva.Text({
x: 26.330053300533024,
y: 128,
text: "Add a body text",
defaultText: "Add a body text",
fontSize: 22,
fontFamily: "Montserrat",
draggable: true,
name: "text",
fontStyle: "300",
id: "textkgrsl68w",
is_settings: true,
wrap: "word",
padding: 5,
fill: "black",
opacity: 1,
isPremium: false,
width: 183.5,
visible: true,
rotation: 0,
scaleX: 1,
scaleY: 1,
offsetX: 0,
offsetY: 0,
skewX: 0,
skewY: 0,
stroke: "rgba(255,0,0,1)",
strokeWidth: 3.75
});
As you can see, it has the same (incorrect) look - without the inline color. I played with fontSize in Codesandbox and when I set it to very big value (like 100), the text's inline color became visible.
I assumed it can be some ratio problem, but as we see on the screenshot, the text's size is similar in both canvas and downloaded image.
How can this be fixed, maybe there is some extra attribute that should also be set?
konva: 7.1.4
react-konva: 16.12.0-0

UPDATED:
You can use text.fillAfterStrokeEnabled(true); to draw fill over stroke.
Old answer:
By default Konva is drawing fill first then stroke. So it will be a text itself and then stroke around it (that goes overfill part).
Probably one-day Konva will support a different order, but at the current moment konva#7.1.4 can't do that.
As a workaround just use two Konva.Text instances. First for stroke, second for fill.
https://codesandbox.io/s/download-konva-text-node-with-stroke-as-base-64-image-forked-w0z4v

Create Guides and Grids ruler with fabric.js

Is there a way to create Guides and grids ruler with fabric.js like photoshop?
I know a library for this purpose:
http://mark-rolich.github.io/RulersGuides.js/
But I want to apply rulers and guides to a Div. So is there any other library or some fabricJs code snippet to achieve this?
Thanks.

Here there is a demo of rulers in fabricjs: https://jsfiddle.net/grqorhqw/1/. Main part of it is adding lines and text markers in a loop:
window.canvas.add(new fabric.Line([measurementThickness - tickSize, location1, measurementThickness, location1], { stroke: '#888', selectable: false }));
window.canvas.add(new fabric.Text(count + "\"", {
left: measurementThickness - (tickSize * 2) - 7,
top: location1,
fontSize: 12,
fontFamily: 'san-serif'
}));

Creating WordArt text effects -FabricJs

I am using fabricJs to create wordArts where one can scale, rotate, transform the texts.
The approach would be rotate and skew every character in text at a certain angle.
I am using Itext class of fabric to style each character
here is what I have done but it isn't working.
var canvas = new fabric.Canvas('c')
var text= "Test fabricJs"
var comicSansText = new fabric.IText(text, {
fontFamily: 'Comic Sans',
left: canvas.width/4, top: canvas.width/2 ,
stroke: '#ff1318',
strokeWidth: 1,
strokeStyle:"#fff",
styles:[[{"fill": "red",
"fontSize": 20,
"angle":30,
"transform":"rotate(30deg)"}]]
});
Refer fiddle here http://jsfiddle.net/swesh/c7s9x2fh/

To enable Curved text, you've to add fabric.CurvedText.js.
Download fabric.CurvedText.js
After that, you can set the angle.
Its working for me.

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);