2009-06-02 5 views
17

Ich habe früher an einem jQuery-Plugin mit dem Namen 'BeautyTips' gearbeitet und es funktionierte gut. Aber, seit ich IE 8 installiert habe, funktioniert dieses Plugin nicht mehr, weil es Excanvas benötigt, um IE zum Zeichnen der Vektoren, Bilder etc. zu bringen.Kann Excanvas in IE 8 arbeiten?

Ich habe versucht, die neuere Version von Excanvas herunterzuladen, aber es funktioniert überhaupt nicht. ..

+32

Immer noch bläst mir, dass Microsoft IE8 ohne natives Canvas herausgebracht. – Nosredna

Antwort

10

Versuchen Sie das Canvas-Element an das Dokument angehängt wird, bevor es mit excanvas Initialisierung:

var foo = document.getElementById("targetElementID"); 
var canvas = document.createElement('canvas'); 
canvas.setAttribute("width", 620); 
canvas.setAttribute("height", 310); 
canvas.setAttribute("class", "mapping"); 
foo.appendChild(canvas); 
canvas = G_vmlCanvasManager.initElement(canvas); 
16

Der neue "Standard" -Modus des IE8 deaktiviert einige nicht standardmäßige Funktionen. Unter ihnen VML, die von Exvanvas verwendet wird. Ich setze einfach IE7 'Standards' Modus, so dass es immer noch funktioniert.

<meta http-equiv="X-UA-Compatible" content="IE=7" /> 

Frustrierend, aber ich kenne keinen Vorteil, der durch IE8 heraufgebracht wird.

+0

Das ist ziemlich gut. Als ich Canvas auf IE8 verwenden musste, warf ich stattdessen einen Quirks-Modus ein, der saugte. – Nosredna

+0

hat es zuerst benutzt, aber immer wieder Probleme auf anderen Teilen der Seite. manuell Einstellung in IE7 Kompatibilität am meisten behoben, so habe ich gegoogelt, bis dieses Element gefunden. in der Theorie Zukunft IE (oh Gott, nein!) können Sie aus einer Vielzahl von "Standards" wählen, aus früheren Versionen – Javier

+0

mmm, die letzte Version scheint nur nur mit dem Kompatibilitätsmodus zu arbeiten, für mich auch – Peanuts

2

Sind Sie sicher, dass Sie die neueste Version von excanvas.js installiert haben? (veröffentlicht im März 2009, gehostet auf der neuen Google Code Projektseite)

Ich habe das Beauty Tips Plugin in IE8 und AFAIK verwendet, es funktionierte im IE8 nativen Modus.

+0

ich didn Ich weiß nicht, dass es neue Exvanvas gab. Vielen Dank. – Nosredna

1

Die neueste bt-Plugin-Version behebt dieses Problem für mich.

+0

@jeff, ich habe versucht, diese Version zu verwenden, aber es hat es nicht für mich funktioniert. Ich musste etwas anderes machen, damit es funktioniert! – AndreMiranda

+0

Ich benutze die neueste Version, aber es funktioniert auch nicht, ich löschte meinen Cache aber immer noch nichts. Irgendwelche Ideen ? – Peanuts

14

Ja, ich habe Excanvas arbeiten im IE8-Standards-Modus (nur für die Verwendung getestet, die wir benötigten). In der Funktion CanvasRenderingContext2D_ I auf Kommentar die Zeile:

//el.style.overflow = 'hidden';//fix IE8

Die Breite und Höhe des Knotenobjekts el durch 0px 0px wurde, so dass nicht den Überlauf Einstellen des gerenderten Element sichtbar gemacht versteckt.

Ich habe die Reihenfolge der Erstellung der canvasPieTimer ein bisschen geändert, um das erforderliche Ergebnis zu erhalten. Ich hoffe, das ist hilfreich.

+0

Sieht so aus, als wäre das Problem. Beim Deaktivieren des Überlaufs für das Canvas-Element, das ich verwendete, wurde das Problem beim Debuggen behoben. – Ian

+0

+1 Ich würde das mehr wählen !! Sparte mir einen massiven Kompatibilitätsmodus Kopfschmerzen !! –

+0

Es ist nicht nötig, den Standardmodus auszuschalten - Sie sind eine Legende! – bart

0

einen Leinwand-Tages als eine Reihe von html mit jquery mit der neuen Version von excanvas nicht funktioniert Anfügen. Sie müssen zuerst document.createElement ('canvas') verwenden.

0

Wenn noch immer dieses Problem vorliegt: Beauty-Tipps Version 0.9.5 behebt dieses Problem. aber wenn Sie frühere Version verwenden (wie ich tue, da die neue Version ein Problem der Spitzen eingeführt vorzeitig in meiner Seite geschlossen), Sie Linie 530 mit diesen Zeilen ersetzen sollten:

var canvas = document.createElement('canvas'); 
$(canvas).attr('width', (numb($text.btOuterWidth(true)) + opts.strokeWidth*2)).attr('height', (numb($text.outerHeight(true)) + opts.strokeWidth*2)).appendTo($box).css({position: 'absolute', top: $text.btPosition().top, left: $text.btPosition().left, zIndex: opts.boxzIndex}); 

hoffen, es hilft .