PDA

View Full Version : [CLOSED] Radial gradient problem Chrome



xeo4.it
Jul 01, 2013, 8:26 AM
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>

Daniil
Jul 01, 2013, 1:03 PM
Hi Jimmy,

This gradient causes the problem.

{
id: "gradBackgroundDue",
type: 'radial',
stops: {
0: { color: "#FFFFFF" },
100: { color: "#1F1F1F" }
}
}

In Chrome I see the following errors:

Error: Invalid value for <radialGradient> attribute cx="undefined"
Error: Invalid value for <radialGradient> attribute cy="undefined"
Error: Invalid value for <radialGradient> attribute r="undefined"

In FireFox I see similar warnings.

Looking at rendered HTML in FireFox and Chrome, a gradient renders the same way:


adient
cx="undefined"
cy="undefined"
r="undefined"
id="gradBackgroundDue">
<stop
offset="0%"
stop-color="#FFFFFF"
stop-opacity="1"></stop>
<stop
offset="100%"
stop-color="#1F1F1F"
stop-opacity="1">

</stop>
</radialg>

So, I fill that Chrome can't work without cx, cy and r settings, but FireFox and IE can do. Maybe, it is event a Chrome bug, not sure.

Though I don't think we can do do something on Ext.NET level.

You could play with those settings.

{
id: "gradBackgroundDue",
type: 'radial',
centerX: someCenterX,
centerY: someCenterY,
radius: someRadius,
stops: {
0: { color: "#FFFFFF" },
100: { color: "#1F1F1F" }
}
}

xeo4.it
Jul 01, 2013, 4:01 PM
Hi Daniil,
with the following code works fine.
Thank you very much.

Jimmy



radius: "50%",
centerX: "50%",
centerY: "50%",

Daniil
Jul 01, 2013, 4:12 PM
Nice. I was not sure what parameters are required to get it working as you need. So, thank you for sharing, good to know about a possibility to set up it in percents.