Jul 01, 2013, 8:26 AM
[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
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]