Question

Ahoy StackOverflow!

I ve run into the following problem: on IE7 only, if I call drawImage() after drawing anything to the canvas, excanvas does not draw the image at the desired x,y coordinates. I have looked on the excanvas project page/ google group, and found that there are known issues with the drawImage() function. ( for example: http://code.google.com/p/explorercanvas/issues/detail?id=104&q=IE7 )

我已尝试恢复身份表,如下文所示:。 Excanvas vmlpositioning 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>

如果您需要外查斯图书馆来管理,你可以在此追索:。

上述文字应当做到如下:

it should draw an outline of the outer edges of the canvas (so you can see it)
it should draw a 100x100 rectangle in the middle of the canvas.
it should draw two lines that cross through the center of the canvas.
it should draw three images: one on the top left corner of the inner box, one at the center, and one on the bottom right corner of the inner box.

我知道的是:是否有人知道这个问题的拼凑/工作?

Answer 1

我也把我的头发拉在这个头上......

我只能找到工作,只要你在塑造你的形象之前不应用变革,就得当。这意味着,你以下列方式取代外部扫描中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形象,而不是像最初那样在某个群体内加以总结。由于某种原因,原来的法典正在造成一片左胎和头胎盘 appear,并可能说明原因。直到我们能够理解其原因,我们才找到适当的解决办法。

友情链接