IE7 excanvas解决方案？
啊哈StackOverflow！
我遇到了以下问题:仅在IE7上，如果在将任何东西绘制到画布后调用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矩形。
- 它应该画两条穿过画布中心的线。
- 它应该画三幅图像:一个在内框的左上角，一个在内框的中间，一个在内框的右下角。
G 213
我想知道的是:这个问题是否有一个已知的补丁/解决方法？
回答 1
Stack Overflow用户
发布于 2012-05-31 16:08:02
我也一直在扯头发.
我只能找到一个解决办法，只要在绘制映像之前不应用转换，它就能正常工作。这意味着您可以将drawImage函数替换为excanvas.js中的函数：
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映像，而不是像最初那样将它包装在一个组中。由于某些原因，原始代码导致图像周围出现左和顶填充，并且无法确定原因。除非我们能弄明白原因，否则我们就找不到合适的办法.
https://stackoverflow.com/questions/10389987
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号