écrire du texte sur un dessin sous IE

Le
Élodie
Bonsoir à tous,

Je vous sollicite car je ne parviens pas à écrire du texte sur un dessin
fait avec la balise <canvas>.
Il y a bien un script canvastext.js qui permet de le faire
(http://www.federated.com/~jim/canvastext/)
mais je ne parviens pas à le faire fonctionner sous IE (Internet Explorer).
(Mais je précise que je suis novice en javascript alors)

Pour faire du <canvas> sous IE, j'utilise le script iecanvas.js
(http://me.eae.net/archive/2005/12/29/canvas-in-ie/)

Si l'un d'entre vous pouviez me montrer comment écrire du texte sur le
dessin de l'exemple donné ici:
http://me.eae.net/projects/iecanvas/demo.html
ce me serait très utile pour savoir comment faire pour mon propre projet.

Merci d'avance de votre aide

Élodie
www.elodieroux.com
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Élodie
Le #16455851
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>
< --------------------- 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
Le #16457361
É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 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
Le #16459091
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" 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
ajoutant avant la ligne :
node.parentNode.replaceChild(newNode, node);
les lignes suivantes :
newNode.width = node.width;
newNode.height = node.height;

HTH
--
Y.D.



Élodie
Le #16459081
/*----------------------------------------------------------------------------
| 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
Le #16459071
/*----------------------------------------------------------------------------
| 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
Le #16459061
/*

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.


====
Set the width and height of the canvas.


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


=== TextCanvas context

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

specified in context.style (below).

====
Erase the content of the canvas. This is equivalent to


except that it also removes any strings created by

context.drawString().


====
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
Le #16459181
<!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>
</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
Le #16459051
Le 01/08/2008 20:31, Élodie a écrit :

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




"YD" [ citation intégrale, signature comprise ]




Cordialement,
--
Olivier Miakinen
Élodie
Le #16459171
c'est super cjoint.com !
Merci du tuyau...

Elodie
YD
Le #16460961
Élodie a écrit :



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.
Publicité
Poster une réponse
Anonyme