IE7 excanvas drawImageの回避策ですか？

Ahoy StackOverflow！IE7 excanvas drawImageの回避策ですか？

私はIE7のみでcanvasに何かを描画した後にdrawImage（）を呼び出すと、excanvasはイメージを目的のx、y座標に描画しません。私はexcanvasプロジェクトページ/ Googleグループを見て、drawImage（）関数に関する既知の問題があることを発見しました。（例：http://code.google.com/p/explorercanvas/issues/detail?id=104&q=IE7）

ここで示唆したように、私は、単位行列を復元しようとしている：Excanvas vml positioning issue、効果がなかったたように見えるけれども。

添付

この問題を実証する簡単なHTML文書である：

<!DOCTYPE HTML> 
<html> 
<head> 
    <script type="text/javascript" src="excanvas.js"></script> 
    <script type="text/javascript"> 
     window.onload = function(){ 
      var icon, ctx; 

      icon  = new Image(); 
      icon.width = "20"; 
      icon.height = "20"; 
      icon.src = "http://www.shangalulu.com/resources/images/icons/small/30.png"; 
      icon.onload = function(){ 
       var ctx; 

       ctx = document.getElementById('the_canvas').getContext('2d'); 



       ctx.beginPath(); 
       ctx.moveTo(0,0); 
       ctx.lineTo(500,0); 
       ctx.lineTo(500,500); 
       ctx.lineTo(0,500); 
       ctx.lineTo(0,0); 
       ctx.moveTo(200,200); 
       ctx.lineTo(300,200); 
       ctx.lineTo(300,300); 
       ctx.lineTo(200,300); 
       ctx.lineTo(200,200); 
       ctx.moveTo(0,0); 
       ctx.lineTo(500,500); 
       ctx.moveTo(0,500); 
       ctx.lineTo(500,0); 
       ctx.stroke(); 


       ctx.drawImage(icon, 190, 190, 20, 20); 
       ctx.drawImage(icon, 240, 240, 20, 20); 
       ctx.drawImage(icon, 290, 290, 20, 20); 

       return; 
      } 
     } 
    </script> 

</head> 
<body> 
    <canvas id="the_canvas" width="500" height="500"></canvas> 
</body> 
</html>

あなたがこれを実行するためにexcanvasライブラリが必要な場合、あなたはここからそれをつかむことができます：http://code.google.com/p/explorercanvas/

上記のスクリプトは、次の操作を行う必要があります：それはキャンバスの外側のエッジの輪郭を描画する必要があり

（あなたがそれを見ることができる）
キャンバスの中央に100x100の長方形を描画する必要があります。
キャンバスの中心を通る2本の線を描く必要があります。
内側のボックスの左上隅に1つ、中央に1つ、内側のボックスの右下に1つずつ、3つの画像を描画する必要があります。

私が知りたいことは：この問題の既知のパッチ/回避策はありますか？私もその1つの上で私の髪を引っ張ってきた

出典

2012-04-30 Axle

...

は、私が唯一の罰金限り、あなたはあなたのイメージを描画する前に変換を適用しないように動作し、回避策を見つけることができました。それはあなたがexcanvas.jsに機能のdrawImageを置き換えることを意味している1：

contextPrototype.drawImage = function(image, var_args) { 
var dx, dy, dw, dh, sx, sy, sw, sh; 

// to find the original width we overide the width and height 
var oldRuntimeWidth = image.runtimeStyle.width; 
var oldRuntimeHeight = image.runtimeStyle.height; 
image.runtimeStyle.width = 'auto'; 
image.runtimeStyle.height = 'auto'; 

// get the original size 
var w = image.width; 
var h = image.height; 

// and remove overides 
image.runtimeStyle.width = oldRuntimeWidth; 
image.runtimeStyle.height = oldRuntimeHeight; 

if (arguments.length == 3) { 
    dx = arguments[1]; 
    dy = arguments[2]; 
    sx = sy = 0; 
    sw = dw = w; 
    sh = dh = h; 
} else if (arguments.length == 5) { 
    dx = arguments[1]; 
    dy = arguments[2]; 
    dw = arguments[3]; 
    dh = arguments[4]; 
    sx = sy = 0; 
    sw = w; 
    sh = h; 
} else if (arguments.length == 9) { 
    sx = arguments[1]; 
    sy = arguments[2]; 
    sw = arguments[3]; 
    sh = arguments[4]; 
    dx = arguments[5]; 
    dy = arguments[6]; 
    dw = arguments[7]; 
    dh = arguments[8]; 
} else { 
    throw Error('Invalid number of arguments'); 
} 
/////////////////////////// MODIFIED BIT /////////////////////////// 
var vmlStr = []; 
vmlStr.push('<g_vml_:image src="', image.src, '"', 
      ' style="position:absolute;', 
      ' top:', dy, 'px;', 
      ' left:', dx, 'px;', 
      ' width:', dw, 'px;', 
      ' height:', dh, 'px;"', 
      ' cropleft="', sx/w, '"', 
      ' croptop="', sy/h, '"', 
      ' cropright="', (w - sx - sw)/w, '"', 
      ' cropbottom="', (h - sy - sh)/h, '"', 
      ' />'); 
/////////////////////////// END OF MODIFIED BIT /////////////////////////// 

this.element_.insertAdjacentHTML('BeforeEnd', 
           vmlStr.join('')); 
};

それは単に代わりにそれがあったように、グループ内のそれをラップで、擬似キャンバス内に直接VMLイメージを作成している何もともと行った。何らかの理由で、元のコードが画像の周りに左上隅のパディングを表示していたため、その理由を把握できませんでした。その理由を理解できるようになるまで、適切な修正を見つけることができません。

出典

2012-05-31 16:08:02

ありがとうございました！残念ながら、私たちはすばやく移動して、サーバーにデータを投げただけでした。もし私が余裕を持っていれば、私はあなたのコードを試してみるでしょう。もう一度、質問に答える時間をとってくれてありがとう！：D – Axle

IE7 excanvas drawImageの回避策ですか？

答えて

関連する問題