个人中心
gpt4 book ai didi

javascript - IE7 excanvas drawImage 解决方法？

转载 作者：行者123 更新时间：2023-11-29 15:46:45 24 4
gpt4 key购买 nike

嗨，StackOverflow!

我遇到了以下问题:仅在 IE7 上，如果我在 Canvas 上绘制任何内容后调用 drawImage()，excanvas 不会在所需的 x、y 坐标处绘制图像。我查看了 excanvas 项目页面/谷歌组，发现 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/

上面的脚本应该执行以下操作:

  1. 它应该绘制 Canvas 外边缘的轮廓(以便您可以看到)
  2. 它应该在 Canvas 中间绘制一个 100x100 的矩形。
  3. 它应该绘制两条穿过 Canvas 中心的线。
  4. 它应该绘制三张图片:一张在内框的左上角，一张在中间，一张在内框的右下角。

我想知道的是:这个问题是否有已知的补丁/解决方法？

最佳答案

我也一直在拉我的头发......

我只能找到一种解决方法，只要您在绘制图像之前不应用转换，该方法就可以正常工作。这意味着您将 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(''));
};

它所做的只是直接在伪 Canvas 内创建一个 VML 图像，而不是像最初那样将其包装在一个组中。出于某种原因，原始代码导致图像周围出现左侧和顶部填充，并且无法弄清楚原因。在我们了解其中的原因之前，我们将无法找到合适的修复方法...

关于javascript - IE7 excanvas drawImage 解决方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10389987/

24 4 0
文章推荐： mysql - 如何在MySQL中计算具有特定值的行(ID)并排除相同ID是否具有其他值？
文章推荐： javascript - Firefox 中的 onchange 被触发而不改变
文章推荐： Javascript 常见任务表单库
文章推荐： javascript - ExtJs:ajax 调用中的代码执行顺序是什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com