écrire du texte sur un dessin sous IE

Élodie

01/08/2008 à 13:20

Par rapport au code html d'origine
(http://me.eae.net/projects/iecanvas/demo.html ), j'ai rajouté l'appel au
script textcanvas.js
et les lignes de code sencées écrire du texte, mais cela ne fonctionne
pas...
si quelqu'un sait pourquoi...

<HTML>
<head>
<title>Canvas in IE</title>
<script type="text/javascript" src="iecanvas.js"></script>
<script type="text/javascript" src="textcanvas.js"></script> //
< --------------------- j'ai ajouté cela
</head>
<body>
<h1>Canvas Demo</h1>
<canvas id="test2" width="300" height="300"></canvas>
<button onclick="draw();">draw</button>
Uses some of the examples from Mozilla's <a
href="http://developer.mozilla.org/en/docs/Canvas_tutorial">Canvas
tutorial</a>.
</body>
<script>

window.onload = function() { ieCanvasInit(); }

function draw() {
var canvas = document.getElementById('test2');

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(5, 5, 25, 25);
ctx.strokeStyle = 'red';
ctx.strokeRect(20, 20, 25, 25);

// Write strings on the drawing
// < --------------------- j'ai ajouté cela
CanvasTextFunctions.enable(ctx);
// < --------------------- j'ai ajouté cela
ctx.clearRect(0,0,canvas.width,canvas.height);
// < --------------------- j'ai ajouté cela
ctx.fillStyle = "rgba(200,200,255,0.66)";
// < --------------------- j'ai ajouté cela
ctx.fillRect(0,0,canvas.width,canvas.height);
// < --------------------- j'ai ajouté cela
var font = "sans";
// < --------------------- j'ai ajouté cela
var fontsize = 16;
// < --------------------- j'ai ajouté cela
var y = ctx.fontAscent(font,fontsize);
// < --------------------- j'ai ajouté cela
ctx.strokeStyle = "rgba(0,0,0,0.75)";
// < --------------------- j'ai ajouté cela
ctx.drawTextCenter( font, fontsize, canvas.width/2, y, "Canvas Text
Functions"); // < --------------------- j'ai ajouté cela

ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(1,1);
ctx.lineTo(80,80);
ctx.lineTo(100,20);
ctx.closePath();
ctx.stroke();

ctx.strokeStyle = 'blue';
ctx.fillStyle = 'black';

ctx.beginPath();
ctx.moveTo(120,50);
ctx.lineTo(150,70);
ctx.lineTo(150,50);

ctx.quadraticCurveTo(150, 150, 80, 80);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.rect(180,180,80,80);
ctx.rect(200,200,80,80);
ctx.stroke();

ctx.beginPath();
ctx.arc(200, 100, 20, 0, Math.PI, true);
ctx.stroke();

ctx.save();
ctx.translate(150, 0);

ctx.fillRect(0,0,150,150);
ctx.fillStyle = '#09F'
ctx.fillRect(15,15,120,120);
ctx.fillStyle = '#FFF'
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90);
ctx.fillRect(45,45,60,60);
ctx.fillRect(60,60,30,30);

ctx.restore();
ctx.save();
ctx.translate(10, 140);

ctx.fillStyle = '#FD0';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75,0,75,75);
ctx.fillStyle = '#09F)';
ctx.fillRect(0,75,75,75);
ctx.fillStyle = '#F30';
ctx.fillRect(75,75,75,75);
ctx.fillStyle = '#FFF';

ctx.globalAlpha = 0.2;

for (i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75, 75, 10+(10*i), 0, Math.PI*2, true);
ctx.fill();
}

ctx.restore();

ctx.beginPath();
ctx.arc(200, 200, 20, 0, Math.PI*2, true);
ctx.stroke();

ctx.save();
ctx.globalAlpha = 1.0;
//ctx.translate(75,75);

for (i=1;i<6;i++){ // Loop through rings (from inside to out)
ctx.save();
ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

for (j=0;j<i*6;j++){ // draw individual dots
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
//ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.rect(0,i*12.5,5,5);
ctx.fill();
}
ctx.restore();
}
ctx.restore();
}

</script>
</html>

Vous avez filtré cet utilisateur ! Consultez son message

Par rapport au code html d'origine
(http://me.eae.net/projects/iecanvas/demo.html ), j'ai rajouté l'appel au
script textcanvas.js
et les lignes de code sencées écrire du texte, mais cela ne fonctionne
pas...
si quelqu'un sait pourquoi...

<HTML>
<head>
<title>Canvas in IE</title>
<script type="text/javascript" src="iecanvas.js"></script>
<script type="text/javascript" src="textcanvas.js"></script> //
< --------------------- j'ai ajouté cela
</head>
<body>
<h1>Canvas Demo</h1>
<canvas id="test2" width="300" height="300"></canvas>
<button onclick="draw();">draw</button>
Uses some of the examples from Mozilla's <a
href="http://developer.mozilla.org/en/docs/Canvas_tutorial">Canvas
tutorial</a>.
</body>
<script>

window.onload = function() { ieCanvasInit(); }

function draw() {
var canvas = document.getElementById('test2');

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(5, 5, 25, 25);
ctx.strokeStyle = 'red';
ctx.strokeRect(20, 20, 25, 25);

// Write strings on the drawing
// < --------------------- j'ai ajouté cela
CanvasTextFunctions.enable(ctx);
// < --------------------- j'ai ajouté cela
ctx.clearRect(0,0,canvas.width,canvas.height);
// < --------------------- j'ai ajouté cela
ctx.fillStyle = "rgba(200,200,255,0.66)";
// < --------------------- j'ai ajouté cela
ctx.fillRect(0,0,canvas.width,canvas.height);
// < --------------------- j'ai ajouté cela
var font = "sans";
// < --------------------- j'ai ajouté cela
var fontsize = 16;
// < --------------------- j'ai ajouté cela
var y = ctx.fontAscent(font,fontsize);
// < --------------------- j'ai ajouté cela
ctx.strokeStyle = "rgba(0,0,0,0.75)";
// < --------------------- j'ai ajouté cela
ctx.drawTextCenter( font, fontsize, canvas.width/2, y, "Canvas Text
Functions"); // < --------------------- j'ai ajouté cela

ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(1,1);
ctx.lineTo(80,80);
ctx.lineTo(100,20);
ctx.closePath();
ctx.stroke();

ctx.strokeStyle = 'blue';
ctx.fillStyle = 'black';

ctx.beginPath();
ctx.moveTo(120,50);
ctx.lineTo(150,70);
ctx.lineTo(150,50);

ctx.quadraticCurveTo(150, 150, 80, 80);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.rect(180,180,80,80);
ctx.rect(200,200,80,80);
ctx.stroke();

ctx.beginPath();
ctx.arc(200, 100, 20, 0, Math.PI, true);
ctx.stroke();

ctx.save();
ctx.translate(150, 0);

ctx.fillRect(0,0,150,150);
ctx.fillStyle = '#09F'
ctx.fillRect(15,15,120,120);
ctx.fillStyle = '#FFF'
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90);
ctx.fillRect(45,45,60,60);
ctx.fillRect(60,60,30,30);

ctx.restore();
ctx.save();
ctx.translate(10, 140);

ctx.fillStyle = '#FD0';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75,0,75,75);
ctx.fillStyle = '#09F)';
ctx.fillRect(0,75,75,75);
ctx.fillStyle = '#F30';
ctx.fillRect(75,75,75,75);
ctx.fillStyle = '#FFF';

ctx.globalAlpha = 0.2;

for (i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75, 75, 10+(10*i), 0, Math.PI*2, true);
ctx.fill();
}

ctx.restore();

ctx.beginPath();
ctx.arc(200, 200, 20, 0, Math.PI*2, true);
ctx.stroke();

ctx.save();
ctx.globalAlpha = 1.0;
//ctx.translate(75,75);

for (i=1;i<6;i++){ // Loop through rings (from inside to out)
ctx.save();
ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

for (j=0;j<i*6;j++){ // draw individual dots
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
//ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.rect(0,i*12.5,5,5);
ctx.fill();
}
ctx.restore();
}
ctx.restore();
}

</script>
</html>

YD

01/08/2008 à 16:28

Élodie a écrit :

Par rapport au code html d'origine
(http://me.eae.net/projects/iecanvas/demo.html ), j'ai rajouté l'appel au
script textcanvas.js
et les lignes de code sencées écrire du texte, mais cela ne fonctionne
pas...
si quelqu'un sait pourquoi...

En supposant que les trois fichiers externes (les 2 .js et le .htc)
soient disponibles, que la version de Windows / IE autorise l'emploi
en local des HTML Components (HTC), le problème restant est
l'utilisation dans le script de la page de test de propriétés non
définies dans le code IECanvas : canvas.width et canvas.height.

Solution 1 : remplacer ces références par une valeur constante (300
en l'occurrence) - solution peu élégante

Solution 2 : modifier le fichier iecanvas.js (ce qui me semble permis
par la licence MIT) pour créer ces propriétés définies par la
recommandation <http://www.whatwg.org/specs/web-apps/current-work/#the-canvas>
en ajoutant avant la ligne :
node.parentNode.replaceChild(newNode, node);
les lignes suivantes :
newNode.width = node.width;
newNode.height = node.height;

HTH
--
Y.D.

Élodie

01/08/2008 à 20:31

J'ai testé les deux solutions mais ça n'affiche rien ;-(

Cela dit, la solution 2, j'ai l'impression qu'il y avait déjà ces
instructions mais avec un .style. au milieu
newNode.style.width = node.width;
newNode.style.height = node.height;
même en rajoutant les instructions sans .style., ça ne fonctionne pas non
plus...

Effectivement, c'est pas facile de raisonner sans les codes sous les yeux...
Comme je ne peux pas les mettre en pièce jointe, je les mets en posts
séparés

En tout cas, merci beaucoup de m'aider !

Elodie

PS: Question subsidiaire, en javascript, quand on fait une erreur, rien ne
s'affiche... y'a-t-il un moyen d'en savoir plus sur l'erreur (à part le
numéro de la ligne approximative en cliquant sur le sigle jaune attention
dans la barre d'IE) ?

"YD" a écrit dans le message de news:
48931d94$0$13083$

Élodie a écrit :
Par rapport au code html d'origine
(http://me.eae.net/projects/iecanvas/demo.html ), j'ai rajouté l'appel au
script textcanvas.js
et les lignes de code sencées écrire du texte, mais cela ne fonctionne
pas...
si quelqu'un sait pourquoi...

En supposant que les trois fichiers externes (les 2 .js et le .htc)
soient disponibles, que la version de Windows / IE autorise l'emploi
en local des HTML Components (HTC), le problème restant est
l'utilisation dans le script de la page de test de propriétés non
définies dans le code IECanvas : canvas.width et canvas.height.

Solution 1 : remplacer ces références par une valeur constante (300
en l'occurrence) - solution peu élégante

Solution 2 : modifier le fichier iecanvas.js (ce qui me semble permis
par la licence MIT) pour créer ces propriétés définies par la
recommandation
<http://www.whatwg.org/specs/web-apps/current-work/#the-canvas> en
ajoutant avant la ligne :
node.parentNode.replaceChild(newNode, node);
les lignes suivantes :
newNode.width = node.width;
newNode.height = node.height;

HTH
--
Y.D.

Élodie

01/08/2008 à 20:32

/*----------------------------------------------------------------------------
| IE Canvas 1.0
|
| Emulation Initialization Script
|
|-----------------------------------------------------------------------------|
| Created by Emil A Eklund
|
| (http://eae.net/contact/emil)
|
|-----------------------------------------------------------------------------|
| Implementation of the canvas API for Internet Explorer. Uses VML.
|
|-----------------------------------------------------------------------------|
| Copyright (c) 2005 Emil A Eklund
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| This program is free software; you can redistribute it and/or modify
it |
| under the terms of the MIT License.
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| Permission is hereby granted, free of charge, to any person obtaining
a |
| copy of this software and associated documentation files (the "Software"),
|
| to deal in the Software without restriction, including without
limitation |
| the rights to use, copy, modify, merge, publish, distribute,
sublicense, |
| and/or sell copies of the Software, and to permit persons to whom
the |
| Software is furnished to do so, subject to the following
conditions: |
| The above copyright notice and this permission notice shall be included
in |
| all copies or substantial portions of the Software.
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR |
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, |
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
THE |
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER |
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING |
| FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER |
| DEALINGS IN THE SOFTWARE.
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| http://eae.net/license/mit
|
|-----------------------------------------------------------------------------|
| Dependencies: canvas.htc - Actual implementation
|
|-----------------------------------------------------------------------------|
| 2005-12-27 | Work started.
|
| 2005-12-29 | First version posted.
|
| 2006-01-03 | Added htcFile argument to ieCanvasInit method.
|
|-----------------------------------------------------------------------------|
| Created 2005-12-27 | All changes are in the log above. | Updated
2006-01-03 |
----------------------------------------------------------------------------*/

function ieCanvasInit(htcFile) {
var ie, opera, a, nodes, i, oVml, oStyle, newNode;

/*
* Only proceed if browser is IE 6 or later (as all other major browsers
* support canvas out of the box there is no need to try to emulate for
* them, and besides only IE supports VML anyway.
*/
ie = navigator.appVersion.match(/MSIE (d.d)/);
opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
if ((!ie) || (ie[1] < 6) || (opera)) {
return;
}

/*
* Recreate elements, as there is no canvas tag in HTML
* The canvas tag is replaced by a new one created using createElement,
* even though the same tag name is given the generated tag is slightly
* different, it's created prefixed with a XML namespace declaration
* <?XML:NAMESPACE PREFIX ="PUBLIC" NS="URN:COMPONENT" />
*/
nodes = document.getElementsByTagName('canvas');
for (i = 0; i < nodes.length; i++) {
node = nodes[i];
if (node.getContext) { return; } // Other implementation, abort
newNode = document.createElement('canvas');
newNode.id = node.id;
newNode.style.width = node.width;
newNode.style.height = node.height;
node.parentNode.replaceChild(newNode, node);
}

/* Add VML includes and namespace */
document.namespaces.add("v");
oVml = document.createElement('object');
oVml.id = 'VMLRender';
oVml.codebase = 'vgx.dll';
oVml.classid = 'CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E';
document.body.appendChild(oVml);

/* Add required css rules */
if ((!htcFile) || (htcFile == '')) { htcFile = 'iecanvas.htc'; }
oStyle = document.createStyleSheet();
oStyle.addRule('canvas', "behavior: url('" + htcFile + "');");
oStyle.addRule('v:*', "behavior: url(#VMLRender);");
}

/*----------------------------------------------------------------------------
| IE Canvas 1.0
|
| Emulation Initialization Script
|
|-----------------------------------------------------------------------------|
| Created by Emil A Eklund
|
| (http://eae.net/contact/emil)
|
|-----------------------------------------------------------------------------|
| Implementation of the canvas API for Internet Explorer. Uses VML.
|
|-----------------------------------------------------------------------------|
| Copyright (c) 2005 Emil A Eklund
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| This program is free software; you can redistribute it and/or modify
it |
| under the terms of the MIT License.
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| Permission is hereby granted, free of charge, to any person obtaining
a |
| copy of this software and associated documentation files (the "Software"),
|
| to deal in the Software without restriction, including without
limitation |
| the rights to use, copy, modify, merge, publish, distribute,
sublicense, |
| and/or sell copies of the Software, and to permit persons to whom
the |
| Software is furnished to do so, subject to the following
conditions: |
| The above copyright notice and this permission notice shall be included
in |
| all copies or substantial portions of the Software.
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR |
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, |
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
THE |
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER |
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING |
| FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER |
| DEALINGS IN THE SOFTWARE.
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| http://eae.net/license/mit
|
|-----------------------------------------------------------------------------|
| Dependencies: canvas.htc - Actual implementation
|
|-----------------------------------------------------------------------------|
| 2005-12-27 | Work started.
|
| 2005-12-29 | First version posted.
|
| 2006-01-03 | Added htcFile argument to ieCanvasInit method.
|
|-----------------------------------------------------------------------------|
| Created 2005-12-27 | All changes are in the log above. | Updated
2006-01-03 |
----------------------------------------------------------------------------*/

function ieCanvasInit(htcFile) {
var ie, opera, a, nodes, i, oVml, oStyle, newNode;

/*
* Only proceed if browser is IE 6 or later (as all other major browsers
* support canvas out of the box there is no need to try to emulate for
* them, and besides only IE supports VML anyway.
*/
ie = navigator.appVersion.match(/MSIE (d.d)/);
opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
if ((!ie) || (ie[1] < 6) || (opera)) {
return;
}

/*
* Recreate elements, as there is no canvas tag in HTML
* The canvas tag is replaced by a new one created using createElement,
* even though the same tag name is given the generated tag is slightly
* different, it's created prefixed with a XML namespace declaration
* <?XML:NAMESPACE PREFIX ="PUBLIC" NS="URN:COMPONENT" />
*/
nodes = document.getElementsByTagName('canvas');
for (i = 0; i < nodes.length; i++) {
node = nodes[i];
if (node.getContext) { return; } // Other implementation, abort
newNode = document.createElement('canvas');
newNode.id = node.id;
newNode.style.width = node.width;
newNode.style.height = node.height;
node.parentNode.replaceChild(newNode, node);
}

/* Add VML includes and namespace */
document.namespaces.add("v");
oVml = document.createElement('object');
oVml.id = 'VMLRender';
oVml.codebase = 'vgx.dll';
oVml.classid = 'CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E';
document.body.appendChild(oVml);

/* Add required css rules */
if ((!htcFile) || (htcFile == '')) { htcFile = 'iecanvas.htc'; }
oStyle = document.createStyleSheet();
oStyle.addRule('canvas', "behavior: url('" + htcFile + "');");
oStyle.addRule('v\:*', "behavior: url(#VMLRender);");
}

Vous avez filtré cet utilisateur ! Consultez son message

/*----------------------------------------------------------------------------
| IE Canvas 1.0
|
| Emulation Initialization Script
|
|-----------------------------------------------------------------------------|
| Created by Emil A Eklund
|
| (http://eae.net/contact/emil)
|
|-----------------------------------------------------------------------------|
| Implementation of the canvas API for Internet Explorer. Uses VML.
|
|-----------------------------------------------------------------------------|
| Copyright (c) 2005 Emil A Eklund
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| This program is free software; you can redistribute it and/or modify
it |
| under the terms of the MIT License.
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| Permission is hereby granted, free of charge, to any person obtaining
a |
| copy of this software and associated documentation files (the "Software"),
|
| to deal in the Software without restriction, including without
limitation |
| the rights to use, copy, modify, merge, publish, distribute,
sublicense, |
| and/or sell copies of the Software, and to permit persons to whom
the |
| Software is furnished to do so, subject to the following
conditions: |
| The above copyright notice and this permission notice shall be included
in |
| all copies or substantial portions of the Software.
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR |
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, |
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
THE |
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER |
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING |
| FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER |
| DEALINGS IN THE SOFTWARE.
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| http://eae.net/license/mit
|
|-----------------------------------------------------------------------------|
| Dependencies: canvas.htc - Actual implementation
|
|-----------------------------------------------------------------------------|
| 2005-12-27 | Work started.
|
| 2005-12-29 | First version posted.
|
| 2006-01-03 | Added htcFile argument to ieCanvasInit method.
|
|-----------------------------------------------------------------------------|
| Created 2005-12-27 | All changes are in the log above. | Updated
2006-01-03 |
----------------------------------------------------------------------------*/

function ieCanvasInit(htcFile) {
var ie, opera, a, nodes, i, oVml, oStyle, newNode;

/*
* Only proceed if browser is IE 6 or later (as all other major browsers
* support canvas out of the box there is no need to try to emulate for
* them, and besides only IE supports VML anyway.
*/
ie = navigator.appVersion.match(/MSIE (d.d)/);
opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
if ((!ie) || (ie[1] < 6) || (opera)) {
return;
}

/*
* Recreate elements, as there is no canvas tag in HTML
* The canvas tag is replaced by a new one created using createElement,
* even though the same tag name is given the generated tag is slightly
* different, it's created prefixed with a XML namespace declaration
* <?XML:NAMESPACE PREFIX ="PUBLIC" NS="URN:COMPONENT" />
*/
nodes = document.getElementsByTagName('canvas');
for (i = 0; i < nodes.length; i++) {
node = nodes[i];
if (node.getContext) { return; } // Other implementation, abort
newNode = document.createElement('canvas');
newNode.id = node.id;
newNode.style.width = node.width;
newNode.style.height = node.height;
node.parentNode.replaceChild(newNode, node);
}

/* Add VML includes and namespace */
document.namespaces.add("v");
oVml = document.createElement('object');
oVml.id = 'VMLRender';
oVml.codebase = 'vgx.dll';
oVml.classid = 'CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E';
document.body.appendChild(oVml);

/* Add required css rules */
if ((!htcFile) || (htcFile == '')) { htcFile = 'iecanvas.htc'; }
oStyle = document.createStyleSheet();
oStyle.addRule('canvas', "behavior: url('" + htcFile + "');");
oStyle.addRule('v:*', "behavior: url(#VMLRender);");
}

Élodie

01/08/2008 à 20:32

/*----------------------------------------------------------------------------
| IE Canvas 1.0
|
|-----------------------------------------------------------------------------|
| Created by Emil A Eklund
|
| (http://eae.net/contact/emil)
|
|-----------------------------------------------------------------------------|
| Implementation of the canvas API for Internet Explorer. Uses VML.
|
|-----------------------------------------------------------------------------|
| Copyright (c) 2005 Emil A Eklund
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| This program is free software; you can redistribute it and/or modify
it |
| under the terms of the MIT License.
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| Permission is hereby granted, free of charge, to any person obtaining
a |
| copy of this software and associated documentation files (the "Software"),
|
| to deal in the Software without restriction, including without
limitation |
| the rights to use, copy, modify, merge, publish, distribute,
sublicense, |
| and/or sell copies of the Software, and to permit persons to whom
the |
| Software is furnished to do so, subject to the following
conditions: |
| The above copyright notice and this permission notice shall be included
in |
| all copies or substantial portions of the Software.
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR |
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, |
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
THE |
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER |
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING |
| FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER |
| DEALINGS IN THE SOFTWARE.
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| http://eae.net/license/mit
|
|-----------------------------------------------------------------------------|
| Dependencies: canvas.js - For initialization of canvas elements
|
|-----------------------------------------------------------------------------|
| 2005-12-27 | Work started.
|
| 2005-12-29 | First version posted.
|
| 2006-01-03 | Fixed bug in moveTo and lineTo, arguments where not
converted |
| | to int which could cause IE to enter an endless loop.
Disabled |
| | antalias for fillRect to better comply with the Mozilla,
Opera |
| | and possibly Safari implementations where using fillRect
is |
| | about the only way to raw non antialiased lines.
|
|-----------------------------------------------------------------------------|
| Created 2005-12-27 | All changes are in the log above. | Updated
2006-01-03 |
----------------------------------------------------------------------------*/

<public:component>
<public:method name="getContext" />
<public:attach event="oncontentready" onevent="initCanvas()"/>
</public:component>

<script language="JScript">

function getContext() {
return element.context;
}

function initCanvas() {
element.context = new IECanvasContext();
element.style.position = 'relative';
element.style.display = 'block';
element.style.overflow = 'hidden';
}

function IECanvasContext() {
this.fillStyle = 'black';
this.globalAlpha = 1.0;
this.globalCompositeOperation = '';
this.lineCap = '';
this.lineJoin = '';
this.lineWidth = '0';
this.miterLimit = '';
this.shadowBlur = '';
this.shadowColor = '';
this.shadowOffsetX = '';
this.shadowOffsetY = '';
this.strokeStyle = 'black';
this._path = '';
this._stateStack = new Array();
this._offsetX = 0;
this._offsetY = 0;
this._rotation = 0;
};

IECanvasContext.prototype.save = function() {
var o;

o = new Object();
this._copyState(this, o);
this._stateStack.push(o);
};

IECanvasContext.prototype.restore = function() {
var o, n;

n = this._stateStack.length - 1;
if (n < 0) { return; }

o = this._stateStack[n];
this._copyState(o, this);
this._stateStack.splice(n, 1);
};

IECanvasContext.prototype._copyState = function(oFrom, oTo) {
oTo.fillStyle = oFrom.fillStyle;
oTo.lineCap = oFrom.lineCap;
oTo.lineJoin = oFrom.lineJoin;
oTo.lineWidth = oFrom.lineWidth;
oTo.miterLimit = oFrom.miterLimit;
oTo.shadowBlur = oFrom.shadowBlur;
oTo.shadowColor = oFrom.shadowColor;
oTo.shadowOffsetX = oFrom.shadowOffsetX;
oTo.shadowOffsetY = oFrom.shadowOffsetY;
oTo._offsetX = oFrom._offsetX;
oTo._offsetY = oFrom._offsetY;
oTo._rotation = oFrom._rotation;
};

IECanvasContext.prototype.rotate = function(r) {
var MAX = Math.PI * 2;

this._rotation += r;
while (this._rotation > MAX) { this._rotation = MAX - this._rotation; }
};

IECanvasContext.prototype.scale = function() { };

IECanvasContext.prototype.translate = function(x, y) {
this._offsetX += x;
this._offsetY += y;
};

IECanvasContext.prototype.bezierCurveTo = function(cp1x, cp1y, cp2x, cp2y,
x, y) {
if (this._path) { this._path += ' '; }

this._path += 'qb' + cp1x + ',' + cp1y + ',' + cp2x + ',' + cp2y + ',' + x
+ ',' + y;
};

IECanvasContext.prototype.clip = function() { };

IECanvasContext.prototype.beginPath = function() {
this._path = '';
};

IECanvasContext.prototype.closePath = function() {
if (this._path) { this._path += ' '; }
this._path += 'x';
};

IECanvasContext.prototype.lineTo = function(x, y) {
if (this._path) { this._path += ' '; }
this._path += 'l' + parseInt(x) + ',' + parseInt(y);
};

IECanvasContext.prototype.moveTo = function(x, y) {
if (this._path) { this._path += ' '; }
this._path += 'm' + parseInt(x) + ',' + parseInt(y);
};

IECanvasContext.prototype.stroke = function() {
var o, s, cosa, sina, cx, cy, x, y;

if (!this._path) { return; }

this._path += ' e';

o = element.ownerDocument.createElement('v:shape');
o.fillColor = 'none';
o.filled = false;
o.strokeColor = this.strokeStyle;
o.stroked = true;
o.weight = this.lineWidth;
o.coordsize = element.offsetWidth + ',' + element.offsetHeight;
o.style.position = 'absolute';
o.style.left = this._offsetX;
o.style.top = this._offsetY;
o.style.width = element.offsetWidth;
o.style.height = element.offsetHeight;
o.path = this._path;

s = element.ownerDocument.createElement('v:stroke');
s.opacity = this.globalAlpha;
o.appendChild(s);

if (this._rotation) {
r = element.ownerDocument.createElement('v:group');
r.style.position = 'absolute';
r.style.left = 0;
r.style.top = 0;
r.style.width = element.offsetWidth;
r.style.height = element.offsetHeight;
r.coordsize = o.coordsize;
r.style.rotation = Math.round((this._rotation * 180) / Math.PI);
r.style.rotationCenter = '0,0';
r.appendChild(o);
element.appendChild(r);

cosa = Math.cos(this._rotation);
sina = Math.sin(this._rotation);
cx = element.offsetWidth / 2;
cy = element.offsetHeight / 2;

x = ( cx*(1-cosa) + cy*sina);
y = (-cx*sina + cy*(1-cosa));

r.style.left = x * -1;
r.style.top = y * -1;
}
else { element.appendChild(o); }
};

IECanvasContext.prototype.fill = function() {
var o, f, r;

if (!this._path) { return; }

this._path += ' e';

o = element.ownerDocument.createElement('v:shape');
o.fillColor = this.fillStyle;
o.strokeColor = this.strokeStyle;
o.stroked = false;
o.weight = this.lineWidth;
o.coordsize = element.offsetWidth + ',' + element.offsetHeight;
o.style.position = 'absolute';
o.style.left = this._offsetX;
o.style.top = this._offsetY;
o.style.width = element.offsetWidth;
o.style.height = element.offsetHeight;
o.path = this._path;

f = element.ownerDocument.createElement('v:fill');
f.opacity = this.globalAlpha;
o.appendChild(f);

if (this._rotation) {
r = element.ownerDocument.createElement('v:group');
r.style.position = 'absolute';
r.style.left = 0;
r.style.top = 0;
r.style.width = element.offsetWidth;
r.style.height = element.offsetHeight;
r.coordsize = o.coordsize;
r.style.rotation = Math.round((this._rotation * 180) / Math.PI);
r.style.rotationCenter = '0,0';
r.appendChild(o);
element.appendChild(r);

cosa = Math.cos(this._rotation);
sina = Math.sin(this._rotation);
cx = (element.offsetWidth) / 2;
cy = (element.offsetHeight) / 2;
x = ( cx*(1-cosa) + cy*sina);
y = (-cx*sina + cy*(1-cosa));

r.style.left = x * -1;
r.style.top = y * -1;
}
else { element.appendChild(o); }
};

IECanvasContext.prototype.arcTo = function(x1, y1, x2, y2, radius) {
// not implemented in gecko, not implemented here
};

IECanvasContext.prototype.quadraticCurveTo = function(cpx, cpy, x, y) {
if (this._path) { this._path += ' '; }

this._path += 'qb' + cpx + ',' + cpy + ',' + x + ',' + y;
};

IECanvasContext.prototype.arc = function(x, y, radius, startAngle,
endAngle, clockwise) {
var xi, yi, x1, y1, x2, y2, x3, y3, x4, y4;

if (this._path) { this._path += ' '; }

xi = parseFloat(x);
yi = parseFloat(y);

x1 = xi - radius;
y1 = yi - radius;

x2 = xi + radius;
y2 = yi + radius;

x3 = xi + (Math.cos(startAngle) * radius);
y3 = yi + (Math.sin(startAngle) * radius);

x4 = xi + (Math.cos(endAngle) * radius);
y4 = yi + (Math.sin(endAngle) * radius);

x3 = Math.round(x3);
y3 = Math.round(y3);
x4 = Math.round(x4);
y4 = Math.round(y4);

this._path += 'ar' + x1 + ',' + y1 + ',' + x2 + ',' + y2 + ',' + x3 + ','
+ y3 + ',' + x4 + ',' + y4;
};

IECanvasContext.prototype.rect = function(x, y, w, h) {
var x1, y1, x2, y2;

x2 = x + w;
y2 = y + h;

x1 = Math.round(x);
y1 = Math.round(y);
x2 = Math.round(x2);
y2 = Math.round(y2);

this._path += 'm' + x1 + ',' + y1;
this._path += ' l' + x2 + ',' + y1;
this._path += ' l' + x2 + ',' + y2;
this._path += ' l' + x1 + ',' + y2;
this._path += ' x'
};

IECanvasContext.prototype.strokeRect = function(x, y, w, h) {
var o, s;

o = element.ownerDocument.createElement('v:rect');
o.fillColor = 'none';
o.filled = false;
o.strokeColor = this.strokeStyle;
o.stroked = true;
o.weight = this.lineWidth;
o.style.position = 'absolute';
o.style.left = this._offsetX + x;
o.style.top = this._offsetY + y;
o.style.width = w;
o.style.height = h;

s = element.ownerDocument.createElement('v:fill');
s.opacity = this.globalAlpha;
o.appendChild(s);

element.appendChild(o);
};

IECanvasContext.prototype.clearRect = function(x, y, w, h) { };

IECanvasContext.prototype.fillRect = function(x, y, w, h) {
var o, f;

if ((x == 0) && (y == 0) && (w == element.offsetWidth) && (h ==
element.offsetHeight) && (this._offsetX == 0) && (this._offsetY == 0) &&
(this.globalAlpha == 1)) {
while (element.firstChild) { element.removeChild(element.lastChild); }
}

o = element.ownerDocument.createElement('v:rect');
o.fillColor = this.fillStyle;
o.filled = true;
o.stroked = false;
o.weight = 0;
o.style.position = 'absolute';
o.style.left = this._offsetX + x;
o.style.top = this._offsetY + y;
o.style.width = w;
o.style.height = h;
o.style.antialias = 'false';

f = element.ownerDocument.createElement('v:fill');
f.opacity = this.globalAlpha;
o.appendChild(f);

element.appendChild(o);
};

IECanvasContext.prototype.addColorStop = function() { };
IECanvasContext.prototype.createLinearGradient = function() { };
IECanvasContext.prototype.createPattern = function() { };
IECanvasContext.prototype.createRadialGradient = function() { };

IECanvasContext.prototype.drawImage = function() { };
IECanvasContext.prototype.drawImageFromRect = function() { };

</script>

Vous avez filtré cet utilisateur ! Consultez son message

/*----------------------------------------------------------------------------
| IE Canvas 1.0
|
|-----------------------------------------------------------------------------|
| Created by Emil A Eklund
|
| (http://eae.net/contact/emil)
|
|-----------------------------------------------------------------------------|
| Implementation of the canvas API for Internet Explorer. Uses VML.
|
|-----------------------------------------------------------------------------|
| Copyright (c) 2005 Emil A Eklund
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| This program is free software; you can redistribute it and/or modify
it |
| under the terms of the MIT License.
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| Permission is hereby granted, free of charge, to any person obtaining
a |
| copy of this software and associated documentation files (the "Software"),
|
| to deal in the Software without restriction, including without
limitation |
| the rights to use, copy, modify, merge, publish, distribute,
sublicense, |
| and/or sell copies of the Software, and to permit persons to whom
the |
| Software is furnished to do so, subject to the following
conditions: |
| The above copyright notice and this permission notice shall be included
in |
| all copies or substantial portions of the Software.
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR |
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, |
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
THE |
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER |
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING |
| FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER |
| DEALINGS IN THE SOFTWARE.
|
|- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-|
| http://eae.net/license/mit
|
|-----------------------------------------------------------------------------|
| Dependencies: canvas.js - For initialization of canvas elements
|
|-----------------------------------------------------------------------------|
| 2005-12-27 | Work started.
|
| 2005-12-29 | First version posted.
|
| 2006-01-03 | Fixed bug in moveTo and lineTo, arguments where not
converted |
| | to int which could cause IE to enter an endless loop.
Disabled |
| | antalias for fillRect to better comply with the Mozilla,
Opera |
| | and possibly Safari implementations where using fillRect
is |
| | about the only way to raw non antialiased lines.
|
|-----------------------------------------------------------------------------|
| Created 2005-12-27 | All changes are in the log above. | Updated
2006-01-03 |
----------------------------------------------------------------------------*/

<public:component>
<public:method name="getContext" />
<public:attach event="oncontentready" onevent="initCanvas()"/>
</public:component>

<script language="JScript">

function getContext() {
return element.context;
}

function initCanvas() {
element.context = new IECanvasContext();
element.style.position = 'relative';
element.style.display = 'block';
element.style.overflow = 'hidden';
}

function IECanvasContext() {
this.fillStyle = 'black';
this.globalAlpha = 1.0;
this.globalCompositeOperation = '';
this.lineCap = '';
this.lineJoin = '';
this.lineWidth = '0';
this.miterLimit = '';
this.shadowBlur = '';
this.shadowColor = '';
this.shadowOffsetX = '';
this.shadowOffsetY = '';
this.strokeStyle = 'black';
this._path = '';
this._stateStack = new Array();
this._offsetX = 0;
this._offsetY = 0;
this._rotation = 0;
};

IECanvasContext.prototype.save = function() {
var o;

o = new Object();
this._copyState(this, o);
this._stateStack.push(o);
};

IECanvasContext.prototype.restore = function() {
var o, n;

n = this._stateStack.length - 1;
if (n < 0) { return; }

o = this._stateStack[n];
this._copyState(o, this);
this._stateStack.splice(n, 1);
};

IECanvasContext.prototype._copyState = function(oFrom, oTo) {
oTo.fillStyle = oFrom.fillStyle;
oTo.lineCap = oFrom.lineCap;
oTo.lineJoin = oFrom.lineJoin;
oTo.lineWidth = oFrom.lineWidth;
oTo.miterLimit = oFrom.miterLimit;
oTo.shadowBlur = oFrom.shadowBlur;
oTo.shadowColor = oFrom.shadowColor;
oTo.shadowOffsetX = oFrom.shadowOffsetX;
oTo.shadowOffsetY = oFrom.shadowOffsetY;
oTo._offsetX = oFrom._offsetX;
oTo._offsetY = oFrom._offsetY;
oTo._rotation = oFrom._rotation;
};

IECanvasContext.prototype.rotate = function(r) {
var MAX = Math.PI * 2;

this._rotation += r;
while (this._rotation > MAX) { this._rotation = MAX - this._rotation; }
};

IECanvasContext.prototype.scale = function() { };

IECanvasContext.prototype.translate = function(x, y) {
this._offsetX += x;
this._offsetY += y;
};

IECanvasContext.prototype.bezierCurveTo = function(cp1x, cp1y, cp2x, cp2y,
x, y) {
if (this._path) { this._path += ' '; }

this._path += 'qb' + cp1x + ',' + cp1y + ',' + cp2x + ',' + cp2y + ',' + x
+ ',' + y;
};

IECanvasContext.prototype.clip = function() { };

IECanvasContext.prototype.beginPath = function() {
this._path = '';
};

IECanvasContext.prototype.closePath = function() {
if (this._path) { this._path += ' '; }
this._path += 'x';
};

IECanvasContext.prototype.lineTo = function(x, y) {
if (this._path) { this._path += ' '; }
this._path += 'l' + parseInt(x) + ',' + parseInt(y);
};

IECanvasContext.prototype.moveTo = function(x, y) {
if (this._path) { this._path += ' '; }
this._path += 'm' + parseInt(x) + ',' + parseInt(y);
};

IECanvasContext.prototype.stroke = function() {
var o, s, cosa, sina, cx, cy, x, y;

if (!this._path) { return; }

this._path += ' e';

o = element.ownerDocument.createElement('v:shape');
o.fillColor = 'none';
o.filled = false;
o.strokeColor = this.strokeStyle;
o.stroked = true;
o.weight = this.lineWidth;
o.coordsize = element.offsetWidth + ',' + element.offsetHeight;
o.style.position = 'absolute';
o.style.left = this._offsetX;
o.style.top = this._offsetY;
o.style.width = element.offsetWidth;
o.style.height = element.offsetHeight;
o.path = this._path;

s = element.ownerDocument.createElement('v:stroke');
s.opacity = this.globalAlpha;
o.appendChild(s);

if (this._rotation) {
r = element.ownerDocument.createElement('v:group');
r.style.position = 'absolute';
r.style.left = 0;
r.style.top = 0;
r.style.width = element.offsetWidth;
r.style.height = element.offsetHeight;
r.coordsize = o.coordsize;
r.style.rotation = Math.round((this._rotation * 180) / Math.PI);
r.style.rotationCenter = '0,0';
r.appendChild(o);
element.appendChild(r);

cosa = Math.cos(this._rotation);
sina = Math.sin(this._rotation);
cx = element.offsetWidth / 2;
cy = element.offsetHeight / 2;

x = ( cx*(1-cosa) + cy*sina);
y = (-cx*sina + cy*(1-cosa));

r.style.left = x * -1;
r.style.top = y * -1;
}
else { element.appendChild(o); }
};

IECanvasContext.prototype.fill = function() {
var o, f, r;

if (!this._path) { return; }

this._path += ' e';

o = element.ownerDocument.createElement('v:shape');
o.fillColor = this.fillStyle;
o.strokeColor = this.strokeStyle;
o.stroked = false;
o.weight = this.lineWidth;
o.coordsize = element.offsetWidth + ',' + element.offsetHeight;
o.style.position = 'absolute';
o.style.left = this._offsetX;
o.style.top = this._offsetY;
o.style.width = element.offsetWidth;
o.style.height = element.offsetHeight;
o.path = this._path;

f = element.ownerDocument.createElement('v:fill');
f.opacity = this.globalAlpha;
o.appendChild(f);

if (this._rotation) {
r = element.ownerDocument.createElement('v:group');
r.style.position = 'absolute';
r.style.left = 0;
r.style.top = 0;
r.style.width = element.offsetWidth;
r.style.height = element.offsetHeight;
r.coordsize = o.coordsize;
r.style.rotation = Math.round((this._rotation * 180) / Math.PI);
r.style.rotationCenter = '0,0';
r.appendChild(o);
element.appendChild(r);

cosa = Math.cos(this._rotation);
sina = Math.sin(this._rotation);
cx = (element.offsetWidth) / 2;
cy = (element.offsetHeight) / 2;
x = ( cx*(1-cosa) + cy*sina);
y = (-cx*sina + cy*(1-cosa));

r.style.left = x * -1;
r.style.top = y * -1;
}
else { element.appendChild(o); }
};

IECanvasContext.prototype.arcTo = function(x1, y1, x2, y2, radius) {
// not implemented in gecko, not implemented here
};

IECanvasContext.prototype.quadraticCurveTo = function(cpx, cpy, x, y) {
if (this._path) { this._path += ' '; }

this._path += 'qb' + cpx + ',' + cpy + ',' + x + ',' + y;
};

IECanvasContext.prototype.arc = function(x, y, radius, startAngle,
endAngle, clockwise) {
var xi, yi, x1, y1, x2, y2, x3, y3, x4, y4;

if (this._path) { this._path += ' '; }

xi = parseFloat(x);
yi = parseFloat(y);

x1 = xi - radius;
y1 = yi - radius;

x2 = xi + radius;
y2 = yi + radius;

x3 = xi + (Math.cos(startAngle) * radius);
y3 = yi + (Math.sin(startAngle) * radius);

x4 = xi + (Math.cos(endAngle) * radius);
y4 = yi + (Math.sin(endAngle) * radius);

x3 = Math.round(x3);
y3 = Math.round(y3);
x4 = Math.round(x4);
y4 = Math.round(y4);

this._path += 'ar' + x1 + ',' + y1 + ',' + x2 + ',' + y2 + ',' + x3 + ','
+ y3 + ',' + x4 + ',' + y4;
};

IECanvasContext.prototype.rect = function(x, y, w, h) {
var x1, y1, x2, y2;

x2 = x + w;
y2 = y + h;

x1 = Math.round(x);
y1 = Math.round(y);
x2 = Math.round(x2);
y2 = Math.round(y2);

this._path += 'm' + x1 + ',' + y1;
this._path += ' l' + x2 + ',' + y1;
this._path += ' l' + x2 + ',' + y2;
this._path += ' l' + x1 + ',' + y2;
this._path += ' x'
};

IECanvasContext.prototype.strokeRect = function(x, y, w, h) {
var o, s;

o = element.ownerDocument.createElement('v:rect');
o.fillColor = 'none';
o.filled = false;
o.strokeColor = this.strokeStyle;
o.stroked = true;
o.weight = this.lineWidth;
o.style.position = 'absolute';
o.style.left = this._offsetX + x;
o.style.top = this._offsetY + y;
o.style.width = w;
o.style.height = h;

s = element.ownerDocument.createElement('v:fill');
s.opacity = this.globalAlpha;
o.appendChild(s);

element.appendChild(o);
};

IECanvasContext.prototype.clearRect = function(x, y, w, h) { };

IECanvasContext.prototype.fillRect = function(x, y, w, h) {
var o, f;

if ((x == 0) && (y == 0) && (w == element.offsetWidth) && (h ==
element.offsetHeight) && (this._offsetX == 0) && (this._offsetY == 0) &&
(this.globalAlpha == 1)) {
while (element.firstChild) { element.removeChild(element.lastChild); }
}

o = element.ownerDocument.createElement('v:rect');
o.fillColor = this.fillStyle;
o.filled = true;
o.stroked = false;
o.weight = 0;
o.style.position = 'absolute';
o.style.left = this._offsetX + x;
o.style.top = this._offsetY + y;
o.style.width = w;
o.style.height = h;
o.style.antialias = 'false';

f = element.ownerDocument.createElement('v:fill');
f.opacity = this.globalAlpha;
o.appendChild(f);

element.appendChild(o);
};

IECanvasContext.prototype.addColorStop = function() { };
IECanvasContext.prototype.createLinearGradient = function() { };
IECanvasContext.prototype.createPattern = function() { };
IECanvasContext.prototype.createRadialGradient = function() { };

IECanvasContext.prototype.drawImage = function() { };
IECanvasContext.prototype.drawImageFromRect = function() { };

</script>

Élodie

01/08/2008 à 20:33

/*

Author: Oliver Steele

Copyright: Copyright 2006 Oliver Steele. All rights reserved.

License: MIT License (Open Source)

Homepage: http://osteele.com/sources/javascript

== Overview

TextCanvas provides an API similar to that of the

WHATWG +canvas+ element, but with the addition of a +drawString+ method.

+drawString+ gives the appearance of rendering a string on

the canvas surface, although it is actually implemented by creating

an HTML element that is absolutely positioned within the canvas's

container.

For example:

// <div id="canvasContainer"></div>

var container = document.getElementById('canvasContainer');

var textCanvasController = new TextCanvas(container);

var ctx = textCanvasController.getContext('2d');

ctx.moveTo(0, 0);

ctx.lineTo(100, 100);

ctx.stringStyle.color = 'red';

ctx.drawString(0, 0, "red");

ctx.stringStyle.color = 'blue';

ctx.drawString(100, 100, "blue");

There is a live example at

http://osteele.com/sources/javascript/textcanvas-example.html.

This library is only known to work in Firefox. It is known

not to work in Safari. The {OpenLaszlo
version}[http://osteele.com/sources/openlaszlo/textdrawview-example.swf] is
cross-browser (even Internet Explorer).

== API

=== TextCanvas

==== <tt>var textCanvasController = new TextCanvas(container)</tt>

Create a virtual "text canvas" within +container+ is an HTML div.

==== <tt>textCanvasController.setDimension(width, height)</tt>

Set the width and height of the canvas.

==== <tt>context = textCanvasController.getContext('2d')</tt>

Returns a 2D context, modified to accept the following methods:

=== TextCanvas context

==== <tt>context.drawString(x, y, string)</tt>

Draw string at (x, y), with the font and text style properties

specified in context.style (below).

==== <tt>context.erase()</tt>

Erase the content of the canvas. This is equivalent to

<tt>context.clearRect(0, 0, canvas.width, canvas.height)</tt>,

except that it also removes any strings created by

context.drawString().

==== <tt>context.style</tt>

An instance of ElementCSSInlineStyle. Calls to drawString

use the font and text properties in this style object. (This

API is analogous to the stateful mechanism that the 2d context

provides for setting stroke and fill properties.)

This implementation uses the container's style object

for this. This won't have any effect if you only set the

font and style properties, but will have surprising results

if you set other properties.

== Known Bugs

This has only been tested under Firefox. It is known not

to work in Safari.

The strings are implemented as HTML divs, which are

positioned absolutely in front of the canvas. They

therefore don't behave exactly as though they were on

the canvas:

- +drawString()+ doesn't respect the current transform.

- +drawString()+ doesn't respect the clip.

- Nontext elements that are drawn subsequent to

a string will be positioned under the string, not under it.

(This last bug could be fixed by using a delegate overlay

generator with a retargetable proxy. The others would require

browser implementation support.)

== Also See

There is also a version of this library for OpenLaszlo.

It can be downloaded from http://osteele.com/sources/openlaszlo/,

and there is a live example
{here}[http://osteele.com/sources/openlaszlo/textdrawview-example.swf].

*/

function TextCanvas(container) {

this.container = container;

if (!container.style.position)

container.style.position = 'relative';

var canvas = document.createElement('canvas');

this.canvas = canvas;

canvas.style.position = 'absolute';

container.appendChild(canvas);

this.labels = [];

}

// Font and text properties. These are applied to strings that are

// rendered with drawString.

TextCanvas.CSSStringProperties = 'color direction fontFamily fontSize
fontSizeAdjust fontStretch fontStyle fontVariant fontWeight letterSpacing
lineHeight textAlign textDecoration textIndent textShadow textTransform
unicodeBidi whiteSpace wordSpacing'.split(' ');

TextCanvas.prototype.getContext = function(contextID) {

var ctx = this.canvas.getContext(contextID);

if (contextID == '2d')

this.attachMethods(ctx, this);

return ctx;

};

TextCanvas.prototype.setDimensions = function(width, height) {

var container = this.container;

var canvas = this.canvas;

// "canvas.width = width" doesn't work in Safari

canvas.setAttribute('width', width);

canvas.setAttribute('height', height);

this.container.style.width = width;

this.container.style.height = height;

}

TextCanvas.prototype.clear = function() {

var canvas = this.canvas;

var ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < this.labels.length; i++)

this.container.removeChild(this.labels[i]);

this.labels = [];

};

TextCanvas.prototype.attachMethods = function(ctx, controller) {

ctx.drawString = function(x, y, string) {

controller.addLabel(x, y, string);

};

ctx.clear = function () {

controller.clear();

};

ctx.stringStyle = controller.container.style;

};

TextCanvas.prototype.addLabel = function(x, y, string) {

var label = document.createElement('div');

label.innerHTML = string;

var style = this.container.style;

var cssNames = TextCanvas.CSSStringProperties;

for (var i = 0; i < cssNames.length; i++) {

var name = cssNames[i];

label.style[name] = style[name];

}

label.style.position = 'absolute';

label.style.left = x;

label.style.top = y;

this.container.appendChild(label);

this.labels.push(label);

}

Vous avez filtré cet utilisateur ! Consultez son message

/*

Author: Oliver Steele

Copyright: Copyright 2006 Oliver Steele. All rights reserved.

License: MIT License (Open Source)

Homepage: http://osteele.com/sources/javascript

== Overview

TextCanvas provides an API similar to that of the

WHATWG +canvas+ element, but with the addition of a +drawString+ method.

+drawString+ gives the appearance of rendering a string on

the canvas surface, although it is actually implemented by creating

an HTML element that is absolutely positioned within the canvas's

container.

For example:

// <div id="canvasContainer"></div>

var container = document.getElementById('canvasContainer');

var textCanvasController = new TextCanvas(container);

var ctx = textCanvasController.getContext('2d');

ctx.moveTo(0, 0);

ctx.lineTo(100, 100);

ctx.stringStyle.color = 'red';

ctx.drawString(0, 0, "red");

ctx.stringStyle.color = 'blue';

ctx.drawString(100, 100, "blue");

There is a live example at

http://osteele.com/sources/javascript/textcanvas-example.html.

This library is only known to work in Firefox. It is known

not to work in Safari. The {OpenLaszlo
version}[http://osteele.com/sources/openlaszlo/textdrawview-example.swf] is
cross-browser (even Internet Explorer).

== API

=== TextCanvas

==== <tt>var textCanvasController = new TextCanvas(container)</tt>

Create a virtual "text canvas" within +container+ is an HTML div.

==== <tt>textCanvasController.setDimension(width, height)</tt>

Set the width and height of the canvas.

==== <tt>context = textCanvasController.getContext('2d')</tt>

Returns a 2D context, modified to accept the following methods:

=== TextCanvas context

==== <tt>context.drawString(x, y, string)</tt>

Draw string at (x, y), with the font and text style properties

specified in context.style (below).

==== <tt>context.erase()</tt>

Erase the content of the canvas. This is equivalent to

<tt>context.clearRect(0, 0, canvas.width, canvas.height)</tt>,

except that it also removes any strings created by

context.drawString().

==== <tt>context.style</tt>

An instance of ElementCSSInlineStyle. Calls to drawString

use the font and text properties in this style object. (This

API is analogous to the stateful mechanism that the 2d context

provides for setting stroke and fill properties.)

This implementation uses the container's style object

for this. This won't have any effect if you only set the

font and style properties, but will have surprising results

if you set other properties.

== Known Bugs

This has only been tested under Firefox. It is known not

to work in Safari.

The strings are implemented as HTML divs, which are

positioned absolutely in front of the canvas. They

therefore don't behave exactly as though they were on

the canvas:

- +drawString()+ doesn't respect the current transform.

- +drawString()+ doesn't respect the clip.

- Nontext elements that are drawn subsequent to

a string will be positioned under the string, not under it.

(This last bug could be fixed by using a delegate overlay

generator with a retargetable proxy. The others would require

browser implementation support.)

== Also See

There is also a version of this library for OpenLaszlo.

It can be downloaded from http://osteele.com/sources/openlaszlo/,

and there is a live example
{here}[http://osteele.com/sources/openlaszlo/textdrawview-example.swf].

*/

function TextCanvas(container) {

this.container = container;

if (!container.style.position)

container.style.position = 'relative';

var canvas = document.createElement('canvas');

this.canvas = canvas;

canvas.style.position = 'absolute';

container.appendChild(canvas);

this.labels = [];

}

// Font and text properties. These are applied to strings that are

// rendered with drawString.

TextCanvas.CSSStringProperties = 'color direction fontFamily fontSize
fontSizeAdjust fontStretch fontStyle fontVariant fontWeight letterSpacing
lineHeight textAlign textDecoration textIndent textShadow textTransform
unicodeBidi whiteSpace wordSpacing'.split(' ');

TextCanvas.prototype.getContext = function(contextID) {

var ctx = this.canvas.getContext(contextID);

if (contextID == '2d')

this.attachMethods(ctx, this);

return ctx;

};

TextCanvas.prototype.setDimensions = function(width, height) {

var container = this.container;

var canvas = this.canvas;

// "canvas.width = width" doesn't work in Safari

canvas.setAttribute('width', width);

canvas.setAttribute('height', height);

this.container.style.width = width;

this.container.style.height = height;

}

TextCanvas.prototype.clear = function() {

var canvas = this.canvas;

var ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < this.labels.length; i++)

this.container.removeChild(this.labels[i]);

this.labels = [];

};

TextCanvas.prototype.attachMethods = function(ctx, controller) {

ctx.drawString = function(x, y, string) {

controller.addLabel(x, y, string);

};

ctx.clear = function () {

controller.clear();

};

ctx.stringStyle = controller.container.style;

};

TextCanvas.prototype.addLabel = function(x, y, string) {

var label = document.createElement('div');

label.innerHTML = string;

var style = this.container.style;

var cssNames = TextCanvas.CSSStringProperties;

for (var i = 0; i < cssNames.length; i++) {

var name = cssNames[i];

label.style[name] = style[name];

}

label.style.position = 'absolute';

label.style.left = x;

label.style.top = y;

this.container.appendChild(label);

this.labels.push(label);

}

Élodie

01/08/2008 à 20:34

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<HTML>
<head>
<title>Canvas in IE</title>
<script type="text/javascript" src="iecanvas.js"></script>
<script type="text/javascript" src="textcanvas.js"></script>
</head>
<body>
<h1>Canvas Demo</h1>
<canvas id="test2" width="300" height="300"></canvas>
<button onclick="draw();">draw</button>
Uses some of the examples from Mozilla's <a
href="http://developer.mozilla.org/en/docs/Canvas_tutorial">Canvas
tutorial</a>.
</body>
<script>

window.onload = function() { ieCanvasInit(); }

function draw() {
var canvas = document.getElementById('test2');

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(5, 5, 25, 25);
ctx.strokeStyle = 'red';
ctx.strokeRect(20, 20, 25, 25);

// Write strings on the drawing
CanvasTextFunctions.enable(ctx);
ctx.clearRect(0,0,300,300);
ctx.fillStyle = "rgba(200,200,255,0.66)";
ctx.fillRect(0,0,300,300);
var font = "sans";
var fontsize = 16;
var y = ctx.fontAscent(font,fontsize);
ctx.strokeStyle = "rgba(0,0,0,0.75)";
ctx.drawTextCenter( font, fontsize, 150, y, "Canvas Text Functions");

ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(1,1);
ctx.lineTo(80,80);
ctx.lineTo(100,20);
ctx.closePath();
ctx.stroke();

ctx.strokeStyle = 'blue';
ctx.fillStyle = 'black';

ctx.beginPath();
ctx.moveTo(120,50);
ctx.lineTo(150,70);
ctx.lineTo(150,50);

ctx.quadraticCurveTo(150, 150, 80, 80);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.rect(180,180,80,80);
ctx.rect(200,200,80,80);
ctx.stroke();

ctx.beginPath();
ctx.arc(200, 100, 20, 0, Math.PI, true);
ctx.stroke();

ctx.save();
ctx.translate(150, 0);

ctx.fillRect(0,0,150,150);
ctx.fillStyle = '#09F'
ctx.fillRect(15,15,120,120);
ctx.fillStyle = '#FFF'
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90);
ctx.fillRect(45,45,60,60);
ctx.fillRect(60,60,30,30);

ctx.restore();
ctx.save();
ctx.translate(10, 140);

ctx.fillStyle = '#FD0';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75,0,75,75);
ctx.fillStyle = '#09F)';
ctx.fillRect(0,75,75,75);
ctx.fillStyle = '#F30';
ctx.fillRect(75,75,75,75);
ctx.fillStyle = '#FFF';

ctx.globalAlpha = 0.2;

for (i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75, 75, 10+(10*i), 0, Math.PI*2, true);
ctx.fill();
}

ctx.restore();

ctx.beginPath();
ctx.arc(200, 200, 20, 0, Math.PI*2, true);
ctx.stroke();

ctx.save();
ctx.globalAlpha = 1.0;
//ctx.translate(75,75);

for (i=1;i<6;i++){ // Loop through rings (from inside to out)
ctx.save();
ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

for (j=0;j<i*6;j++){ // draw individual dots
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
//ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.rect(0,i*12.5,5,5);
ctx.fill();
}
ctx.restore();
}
ctx.restore();
}

</script>
</html>

Vous avez filtré cet utilisateur ! Consultez son message

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<HTML>
<head>
<title>Canvas in IE</title>
<script type="text/javascript" src="iecanvas.js"></script>
<script type="text/javascript" src="textcanvas.js"></script>
</head>
<body>
<h1>Canvas Demo</h1>
<canvas id="test2" width="300" height="300"></canvas>
<button onclick="draw();">draw</button>
Uses some of the examples from Mozilla's <a
href="http://developer.mozilla.org/en/docs/Canvas_tutorial">Canvas
tutorial</a>.
</body>
<script>

window.onload = function() { ieCanvasInit(); }

function draw() {
var canvas = document.getElementById('test2');

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(5, 5, 25, 25);
ctx.strokeStyle = 'red';
ctx.strokeRect(20, 20, 25, 25);

// Write strings on the drawing
CanvasTextFunctions.enable(ctx);
ctx.clearRect(0,0,300,300);
ctx.fillStyle = "rgba(200,200,255,0.66)";
ctx.fillRect(0,0,300,300);
var font = "sans";
var fontsize = 16;
var y = ctx.fontAscent(font,fontsize);
ctx.strokeStyle = "rgba(0,0,0,0.75)";
ctx.drawTextCenter( font, fontsize, 150, y, "Canvas Text Functions");

ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(1,1);
ctx.lineTo(80,80);
ctx.lineTo(100,20);
ctx.closePath();
ctx.stroke();

ctx.strokeStyle = 'blue';
ctx.fillStyle = 'black';

ctx.beginPath();
ctx.moveTo(120,50);
ctx.lineTo(150,70);
ctx.lineTo(150,50);

ctx.quadraticCurveTo(150, 150, 80, 80);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.rect(180,180,80,80);
ctx.rect(200,200,80,80);
ctx.stroke();

ctx.beginPath();
ctx.arc(200, 100, 20, 0, Math.PI, true);
ctx.stroke();

ctx.save();
ctx.translate(150, 0);

ctx.fillRect(0,0,150,150);
ctx.fillStyle = '#09F'
ctx.fillRect(15,15,120,120);
ctx.fillStyle = '#FFF'
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90);
ctx.fillRect(45,45,60,60);
ctx.fillRect(60,60,30,30);

ctx.restore();
ctx.save();
ctx.translate(10, 140);

ctx.fillStyle = '#FD0';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75,0,75,75);
ctx.fillStyle = '#09F)';
ctx.fillRect(0,75,75,75);
ctx.fillStyle = '#F30';
ctx.fillRect(75,75,75,75);
ctx.fillStyle = '#FFF';

ctx.globalAlpha = 0.2;

for (i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75, 75, 10+(10*i), 0, Math.PI*2, true);
ctx.fill();
}

ctx.restore();

ctx.beginPath();
ctx.arc(200, 200, 20, 0, Math.PI*2, true);
ctx.stroke();

ctx.save();
ctx.globalAlpha = 1.0;
//ctx.translate(75,75);

for (i=1;i<6;i++){ // Loop through rings (from inside to out)
ctx.save();
ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

for (j=0;j<i*6;j++){ // draw individual dots
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
//ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.rect(0,i*12.5,5,5);
ctx.fill();
}
ctx.restore();
}
ctx.restore();
}

</script>
</html>

Olivier Miakinen

01/08/2008 à 20:36

Le 01/08/2008 20:31, Élodie a écrit :

[...]
Comme je ne peux pas les mettre en pièce jointe, [...]

<http://www.cjoint.com/>

"YD" a écrit dans le message de news:
[ citation intégrale, signature comprise ]

<http://www.usenet-fr.net/fur/usenet/repondre-sur-usenet.html>

Cordialement,
--
Olivier Miakinen

Élodie

01/08/2008 à 20:38

c'est super cjoint.com !
Merci du tuyau...

Elodie

YD

02/08/2008 à 09:38

Élodie a écrit :

[etc.]

Il n'était pas utile de balancer tous ces documents ! Vu mon post
précédent, il me semblait évident que j'en avais pris connaissance...

Pour que ça fonctionne, j'avais oublié de signaler un autre problème.
Visiblement l'implémentation actuelle iecanvas ne gère pas la
transparence. Les lignes utilisant rgba() provoquent l'affichage d'une
zone noire comme :
ctx.fillStyle = "rgba(200,200,255,0.66)";

J'ai mis un exemple qui fonctionne avec IE7 en ligne là :
http://ygda.free.fr/canvas/ie_text_demo.htm

Attention il fonctionne avec une version (très légèrement) modifiée de
iecanvas.htc comme signalé avant. De toute façon tous les fichiers
nécessaires sont visibles : http://ygda.free.fr/canvas/

--
Y.D.

écrire du texte sur un dessin sous IE

10 réponses

Veuillez sélectionner un problème