3

Ahoy StackOverflow！

次の問題が発生しました。IE7でのみ、キャンバスに何かを描画した後にdrawImage（）を呼び出すと、excanvasは目的のx、y座標で画像を描画しません。excanvasプロジェクトページ/グーグルグループを調べたところ、drawImage（）関数に既知の問題があることがわかりました。（例：http ：//code.google.com/p/explorercanvas/issues/detail？id = 104＆q = IE7 ）

ここで提案されているように、単位行列を復元しようとしました：Excanvas vmlのポジショニングの問題ですが、効果がなかったようです。

添付されているのは、この問題を示す簡単な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/

上記のスクリプトは次のことを行う必要があります。

  1. キャンバスの外縁の輪郭を描く必要があります（あなたがそれを見ることができるように）
  2. キャンバスの中央に100x100の長方形を描画する必要があります。
  3. キャンバスの中心を横切る2本の線を描画する必要があります。
  4. 内箱の左上隅に1つ、中央に1つ、内箱の右下隅に1つ、合計3つの画像を描画する必要があります。

私が知りたいのは、この問題に対する既知のパッチ/回避策はありますか？

4

1 に答える 1

1

私もあれに髪を引っ張ってきました...

画像を描画する前に変換を適用しない限り、問題なく機能する回避策を見つけることしかできませんでした。これは、excanvas.jsの関数drawImageを次の関数に置き換えることを意味します。

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-31T16:08:02.177 に答える