[CLOSED] Radial gradient problem Chrome

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [CLOSED] Radial gradient problem Chrome

    Hi,
    see my following example, in IE and Firefox works fine, but in Google Chrome the radial gradient "gradBackgroundDue" doesn't work.
    Thank you very much.

    Jimmy

    <%@ Page Language="C#" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <!DOCTYPE html>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
    
       <script type="text/javascript" >
    
    
         var createGauge = function (panelContainer, w, h) {
    
    
           var r = 0;
    
    
           if (w < h)
             r = Math.round(w / 2);
           else
             r = Math.round(h / 2);
    
    
           var drawGauge = Ext.create('Ext.draw.Component', {
             id: "drawGauge",
             height: r * 2 + 1,
             width: r * 2 + 1,
             style: 'background:white; border: 1px solid black;',
             gradients: [
               { id: "gradBackgroundUno", angle: 90, stops: { 0: { color: "#FFFFFF" }, 1: { color: "#F6F6F6" }, 2: { color: "#E8E8E8" }, 3: { color: "#E3E3E3" }, 100: { color: "#878787" } } },
               { id: "gradBackgroundDue", type: 'radial', stops: { 0: { color: "#FFFFFF" }, 100: { color: "#1F1F1F" } } },
               { id: "gradCerchioLancetta", angle: 90, stops: { 0: { color: "#FFFFFF" }, 1: { color: "#F6F6F6" }, 2: { color: "#E8E8E8" }, 3: { color: "#E3E3E3" }, 100: { color: "#878787" } } },
               { id: "gradCerchioLancettaDue", angle: 90, stops: { 0: { color: "#FFFFFF" }, 14: { color: "#F9CDCD" }, 30: { color: "#F39B99" }, 45: { color: "#ED706E" }, 61: { color: "#E9504D" }, 75: { color: "#E63835" }, 88: { color: "#E52A27" }, 100: { color: "#E42522" } } },
               { id: "gradArrow", stops: { 0: { color: "#E42522" }, 100: { color: "#E42522" } } },
             ],
             viewBox: false
           });
    
    
           panelContainer.add(drawGauge);
    
    
           drawGauge.surface.add({
             type: "circle",
             fill: "url(#gradBackgroundUno)",
             radius: r - 1,
             x: r,
             y: r,
             id: "backgroundUno"
           }).show(true);
    
    
    
    
    
    
           drawGauge.surface.add({
             type: "circle",
             fill: "url(#gradBackgroundDue)",
             radius: r - ((4 * r) / 60),
             x: r,
             y: r,
             id: "backgroundDue"
           }).show(true);
    
    
    
    
           //Per il calcolo in radianti faccio 1,75 % di pi da 315 a 75
           var raggio = r - ((6 * r) / 60);
           var recX = 0, recY = 0;
           var steps = 10;
           var gradi = 315;
           var stepG = (270 / steps);
           var stepGCor = (stepG / 10);
           var percPi = 0.75;
           var percPiText = 0.75;
           var stepPi = (1.5 / steps);
           var stepPiCor = stepPi / 10;
           var percPiCor = 0;
           var gradiCor = 0;
           var anchorText = '';
    
    
           for (idx = 0; idx <= steps; idx++) {
             recX = r + (raggio * Math.cos(percPi * Math.PI));
             recY = r + (raggio * Math.sin(percPi * Math.PI));
    
    
             drawGauge.surface.add({
               type: "rect",
               fill: "#FFFFFF",
               height: 1,
               width: Math.round((5 * r) / 60),
               x: recX,
               y: recY,
               id: "linea" + idx,
               rotate: {
                 x: recX,
                 y: recY,
                 degrees: gradi
               }
             }).show(true);
    
    
             var rInterno = r - ((12 * r) / 60);
    
    
             recX = r + (rInterno * Math.cos(percPi * Math.PI));
             recY = r + (rInterno * Math.sin(percPi * Math.PI));
    
    
             if (percPiText <= 1.26)
               anchorText = 'start';
             else if (percPiText > 1.26 && percPiText < 1.75) {
               anchorText = 'middle';
               recY = r + ((r - ((16 * r) / 60)) * Math.sin(percPi * Math.PI));
             }
             else
               anchorText = 'end';
    
    
             drawGauge.surface.add({
               type: "text",
               fill: "#fff",
               font: "8px Helvetica, Arial",
               text: (idx * 10) + '',
               'text-anchor': anchorText,
               x: recX,
               y: recY,
               id: 'text' + idx
             }).show(true);
    
    
             percPiCor = percPi;
             gradiCor = gradi;
    
    
             gradi = sumDegree(gradi, stepG);
             percPi = sumPercPi(percPi, stepPi);
             percPiText += stepPi;
    
    
             if (idx < steps) {
    
    
               for (ind = 1; ind < 10; ind++) {
    
    
                 percPiCor += stepPiCor;
                 gradiCor += stepGCor;
    
    
                 recX = r + (raggio * Math.cos(percPiCor * Math.PI));
                 recY = r + (raggio * Math.sin(percPiCor * Math.PI));
    
    
                 drawGauge.surface.add({
                   type: "rect",
                   fill: "#FFFFFF",
                   height: 1,
                   width: Math.round((3 * r) / 60),
                   x: recX,
                   y: recY,
                   id: "lineaCor" + idx + "_" + ind,
                   rotate: {
                     x: recX,
                     y: recY,
                     degrees: gradiCor
                   }
                 }).show(true);
    
    
               }
             }
    
    
           }
    
    
           var valueAngle = 0;
           var value = 0;
           var puntaX = 0, puntaY = 0;
    
    
           valueAngle = (0.75 + ((value * 1.5) / 100)) * Math.PI;
           var novantaRad = 0.5 * Math.PI;
    
    
           puntaX = r + ((r - ((10 * r) / 60)) * Math.cos(valueAngle));
           puntaY = r + ((r - ((10 * r) / 60)) * Math.sin(valueAngle));
    
    
           drawGauge.surface.add({
             type: "path",
             fill: "#E42522",
             path: [
                   'M', r + (((2.5 * r) / 60) * Math.cos(valueAngle - novantaRad)),
                    r + (((2.5 * r) / 60) * Math.sin(valueAngle - novantaRad)),
                   'L', r + (((2.5 * r) / 60) * Math.cos(valueAngle + novantaRad)),
                    r + (((2.5 * r) / 60) * Math.sin(valueAngle + novantaRad)),
                   'L', puntaX + (((0.5 * r) / 60) * Math.cos(valueAngle + novantaRad)),
                    puntaY + (((0.5 * r) / 60) * Math.sin(valueAngle + novantaRad)),
                    'L', puntaX + (((0.5 * r) / 60) * Math.cos(valueAngle - novantaRad)),
                    puntaY + (((0.5 * r) / 60) * Math.sin(valueAngle - novantaRad)),
                   'Z'
             ],
             "stroke-width": 1,
             stroke: "#E42522",
             id: 'arrow'
           }).show(true);
    
    
           drawGauge.surface.add({
             type: "circle",
             fill: "url(#gradCerchioLancetta)",
             radius: ((8 * r) / 60),
             x: r,
             y: r,
             id: "cerchioLancetta"
           }).show(true);
    
    
           drawGauge.surface.add({
             type: "circle",
             fill: "url(#gradCerchioLancettaDue)",
             radius: ((6 * r) / 60),
             x: r,
             y: r,
             id: "cerchioLancettaDue"
           }).show(true);
    
    
           var arrow = App.drawGauge.get('arrow');
    
    
           arrow.animate({
             duration: 0, to: {
               rotate: {
                 x: r,
                 y: r,
                 degrees: 20
               }
             }
           });
    
    
           arrow.animate({
             duration: 1000, to: {
               rotate: {
                 x: r,
                 y: r,
                 degrees: 0
               }
             }
           });
         }
    
    
         var sumDegree = function (a, b) {
    
    
           var retVal = 0;
    
    
           if ((a + b) > 360)
             retVal = (a + b) - 360;
           else
             retVal = a + b;
    
    
           return retVal;
         }
    
    
         var sumPercPi = function (a, b) {
    
    
           var retVal = 0;
    
    
           if ((a + b) > 2)
             retVal = (a + b) - 2;
           else
             retVal = a + b;
    
    
           return retVal;
         }
    
    
         var btnAnimateClick = function (r) {
    
    
           var arrow = App.drawGauge.get('arrow');
    
    
           var value = (App.txtGradi.getValue() * 1);
           var minValue = 0;
           var maxValue = 100;
    
    
           var degreesVal = ((value - minValue) * 270) / (maxValue - minValue);
    
    
           arrow.animate({
             duration: 1000, to: {
               rotate: {
                 x: r,
                 y: r,
                 degrees: degreesVal
               }
             }
           });
    
    
         }
    
    
      </script>
    
    
    </head>
    <body>
        <form id="form1" runat="server">
        
           <ext:ResourceManager ID="ResourceManager1" runat="server" >
            <Listeners>
              <DocumentReady Handler="createGauge(App.pnlContainerGauge, 180, 180);" />
            </Listeners>
          </ext:ResourceManager>
    
    
          <ext:Panel 
            ID="pnlContainerGauge"
            runat="server"
            Height="200"
            Width="300"
            Resizable="true"
            Border="false"
            Layout="VBoxLayout"
            >
          </ext:Panel>
    
    
          <ext:TextField ID="txtGradi" runat="server" Width="150"></ext:TextField>
    
    
          <ext:Button ID="btnAnimate" runat="server" Text="Anima">
            <Listeners>
                <Click Handler="btnAnimateClick(90);" />
            </Listeners>
          </ext:Button>
    
    
        </form>
    </body>
    </html>
    Last edited by Daniil; Jul 01, 2013 at 4:12 PM. Reason: [CLOSED]

Similar Threads

  1. [CLOSED] [1.0] - Problem with Chrome and axd
    By FVNoel in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 13, 2013, 4:17 PM
  2. [OPEN] [#37] Column gradient problem
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Nov 17, 2012, 12:36 AM
  3. [CLOSED] And now, what about gradient color in collumn chart?
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 05, 2012, 2:04 PM
  4. Replies: 2
    Last Post: Mar 02, 2012, 1:07 PM
  5. Problem with a example in Chrome and Firefox...
    By Tanielian in forum 1.x Help
    Replies: 2
    Last Post: Apr 07, 2011, 6:14 PM

Posting Permissions