Bug when using FontFamily in Text Sprite

  1. #1

    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:

    <%@ 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?
  2. #2

    This is another example but stand alone, which kindda work

    <%@ 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&nbsp;<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:

    var txt = App.Draw1.getSprites()[0];
    
    txt.setAttributes({text: '\uF0AA'});
    
    txt.getSurface().renderFrame();
  3. #3
    Hi @Fabricio
    Could you take a look here, you can reproduce it easily with both samples I posted.

Similar Threads

  1. Context menu on Sprite
    By santogudi in forum 2.x Help
    Replies: 2
    Last Post: Jun 19, 2013, 8:52 AM
  2. [CLOSED] FontFamily style in ComboBox
    By softmachine2011 in forum 2.x Premium Help
    Replies: 4
    Last Post: Jun 01, 2012, 11:19 AM
  3. [CLOSED] Draggable Sprite
    By paulc in forum 2.x Premium Help
    Replies: 1
    Last Post: May 14, 2012, 8:58 PM
  4. ComboBox bug Value equals Text
    By jjakob in forum 1.x Help
    Replies: 2
    Last Post: Feb 11, 2010, 1:44 PM
  5. Replies: 1
    Last Post: Jan 27, 2010, 1:19 PM

Tags for this Thread

Posting Permissions