Bug when using FontFamily in Text Sprite
Hi All,
We want to implement a line series with different icons as markers.The elegant way would be to use font icons (like fontawesome). However I see there is a bug, when we want to use text sprites with the series. As usual the best way is to have an example:
Code:
<%@ Page Language="C#" %>
<script runat="server">
protected void ReloadData(object sender, DirectEventArgs e)
{
this.Chart1.GetStore().DataBind();
}
private static double seed = 1.42;
private static int Random()
{
// Controllable random.
seed *= 7.3;
seed -= Math.Floor(seed);
return Convert.ToInt32(seed);
}
public static object GenerateData(int count = 9)
{
var data = new List<Item>();
int i;
Item record = new Item
{
ID = 0,
G0 = 200,
G1 = 500 * Random() + 100,
G2 = 500 * Random() + 100,
G3 = 500 * Random() + 100,
G4 = 500 * Random() + 100,
G5 = 500 * Random() + 100,
G6 = 500 * Random() + 100,
Name = "Item-0"
};
data.Add(record);
for (i = 1; i < count; i++)
{
record = new Item
{
ID = i,
G0 = record.G0 + 30 * Random(),
G1 = Math.Abs(record.G1 + 300 * Random() - 140),
G2 = Math.Abs(record.G2 + 300 * Random() - 140),
G3 = Math.Abs(record.G3 + 300 * Random() - 140),
G4 = Math.Abs(record.G4 + 300 * Random() - 140),
G5 = Math.Abs(record.G5 + 300 * Random() - 140),
G6 = Math.Abs(record.G6 + 300 * Random() - 140),
Name = "Item-" + i
};
data.Add(record);
}
return data;
}
public class Item
{
public int ID
{
get;
set;
}
public int G0
{
get;
set;
}
public int G1
{
get;
set;
}
public int G2
{
get;
set;
}
public int G3
{
get;
set;
}
public int G4
{
get;
set;
}
public int G5
{
get;
set;
}
public int G6
{
get;
set;
}
public string Name
{
get;
set;
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Line Chart - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
function renderer(sprite, config, rendererData, index) {
var store = rendererData.store,
storeItems = store.getData().items,
currentRecord = storeItems[index],
previousRecord = (index > 0 ? storeItems[index-1] : currentRecord),
current = currentRecord && currentRecord.data['G1'],
previous = previousRecord && previousRecord.data['G1'],
isUp = current >= previous,
changes = {};
switch (config.type) {
case 'marker':
changes.strokeStyle = (isUp ? 'cornflowerblue' : 'tomato');
//if (isUp)
// sprite.setAttributes({ text: '\uF0AA' }, true);
//else
// sprite.setAttributes({ text: '\uF358' }, true);
changes.fillStyle = (isUp ? 'aliceblue' : 'lightpink');
//sprite.setAttributes({ fontFamily: 'FontAwesome' }, true);
//sprite.getSurface().renderFrame();
//changes.text = '\uF0AA';
changes.text = 'X';
break;
case 'line':
changes.strokeStyle = (isUp ? 'cornflowerblue' : 'tomato');
changes.fillStyle = (isUp ? 'aliceblue' : 'rgba(211, 211, 211, 1.0)');
break;
}
return changes;
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel
runat="server"
Width="650"
Height="500"
Layout="FitLayout">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill runat="server" />
<ext:Button
runat="server"
Text="Refresh"
Icon="ArrowRefresh"
OnDirectClick="ReloadData" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:CartesianChart
ID="Chart1"
runat="server">
<Store>
<ext:Store
runat="server"
Data="<%# GenerateData() %>"
AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="G0" />
<ext:ModelField Name="G1" />
<ext:ModelField Name="G2" />
<ext:ModelField Name="G3" />
<ext:ModelField Name="G4" />
<ext:ModelField Name="G5" />
<ext:ModelField Name="G6" />
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Background Fill="white" />
<Axes>
<ext:NumericAxis
Position="Left"
Fields="G1,G2"
Minimum="0">
</ext:NumericAxis>
<ext:CategoryAxis Position="Bottom" Fields="Name">
</ext:CategoryAxis>
</Axes>
<Series>
<ext:LineSeries
XField="Name"
YField="G1"
Fill="true"
UseSmooth="true">
<Marker>
<ext:TextSprite /> <%-- TODO Add this and it fails FontFamily="FontAwesome" or any other font: FontFamily="OpenSans"--%>
</Marker>
<Renderer Fn="renderer" />
</ext:LineSeries>
</Series>
</ext:CartesianChart>
</Items>
</ext:Panel>
</form>
</body>
</html>
Is there a fix for it? or should we wait for the new release?
This is another example but stand alone, which kindda work
Code:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Rotate Text - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<ext:XScript runat="server">
<script>
var handleSliderChange = function (slider, newValue, thumb, type) {
if (#{Draw1}) {
#{Draw1}.getSurface().get('Sprite1').setAttributes({ rotationRads: newValue * Math.PI / 180 });
#{Draw1}.getSurface().renderFrame();
}
}
</script>
</ext:XScript>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>Rotating Text with a Draw Component</h1>
<p>
In this example, you can see how easy it is to create text in a Draw Component which can be rotated easily in any browser. Use the slider to spin the text 360 degrees.
</p>
<div style="font-family: FontAwesome;">.</div>
<p>
See the Drawing guide <a href="http://docs.sencha.com/extjs/6.5.1/guides/core_concepts/draw/drawing.html">here</a>.
</p>
<ext:Slider
runat="server"
Width="400"
MinValue="0"
MaxValue="360"
Number="0">
<Listeners>
<Change Fn="handleSliderChange" />
</Listeners>
</ext:Slider>
<ext:DrawContainer ID="Draw1" runat="server" Height="350">
<Items>
<ext:TextSprite
SpriteID="Sprite12"
Text="\uF0AA"
FontSize="48px"
FontFamily="FontAwesome"
TranslationY="100"
TranslationX="50">
</ext:TextSprite>
<ext:TextSprite
SpriteID="Sprite1"
Text="Rotate me"
FillStyle="#0F0"
FontSize="18px"
FontFamily="Arial"
TranslationY="50"
TranslationX="150">
</ext:TextSprite>
</Items>
</ext:DrawContainer>
</form>
</body>
</html>
Run this first (inside ext.net examples solution) and fontawesome is not applied. In chrome dev tool you can however configure it in following way and see the expected behavior:
Code:
var txt = App.Draw1.getSprites()[0];
txt.setAttributes({text: '\uF0AA'});
txt.getSurface().renderFrame();
