Javascript IE7 excanvas drawImage解决方案？
嗨，斯塔克 我遇到了以下问题：仅在IE7上，如果在画布上绘制任何内容后调用drawImage（），excanvas不会在所需的x，y坐标处绘制图像。我查看了excanvas项目页面/google组，发现drawImage（）函数存在已知问题。 （例如：） 我已经尝试恢复身份矩阵，正如这里所建议的：，尽管它似乎没有任何效果 附件是一个简单的html文档，演示了此问题：Javascript IE7 excanvas drawImage解决方案？,javascript,internet-explorer-7,excanvas,Javascript,Internet Explorer 7,Excanvas,嗨，斯塔克 我遇到了以下问题：仅在IE7上，如果在画布上绘制任何内容后调用drawImage（），excanvas不会在所需的x，y坐标处绘制图像。我查看了excanvas项目页面/google组，发现drawImage（）函数存在已知问题。 （例如：） 我已经尝试恢复身份矩阵，正如这里所建议的：，尽管它似乎没有任何效果 附件是一个简单的html文档，演示了此问题： <!DOCTYPE HTML> <html> <head> <script ty
<!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>
window.onload=函数（）{
变量图标，ctx；
图标=新图像（）；
icon.width=“20”；
icon.height=“20”；
icon.src=”http://www.shangalulu.com/resources/images/icons/small/30.png";
icon.onload=函数（）{
var-ctx；
ctx=document.getElementById（'the_canvas'）.getContext（'2d'）；
ctx.beginPath（）；
ctx.moveTo（0,0）；
ctx.lineTo（500,0）；
ctx.lineTo（500500）；
ctx.lineTo（0500）；
ctx.lineTo（0,0）；
ctx.moveTo（200200）；
ctx.lineTo（300200）；
ctx.lineTo（300300）；
ctx.lineTo（200300）；
ctx.lineTo（200200）；
ctx.moveTo（0,0）；
ctx.lineTo（500500）；
ctx.moveTo（0500）；
ctx.lineTo（500,0）；
ctx.stroke（）；
ctx.drawImage（图标，190、190、20、20）；
ctx.drawImage（图标，240，240，20，20）；
ctx.drawImage（图标29029020）；
返回；
}
}
我想知道的是：这个问题有没有已知的补丁/解决方法？我也一直在努力解决这个问题 我只能找到一种变通方法，只要在绘制图像之前不应用变换，这种方法就可以很好地工作。这意味着您将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(''));
};
contextPrototype.drawImage=函数（图像，变量参数）{
变量dx、dy、dw、dh、sx、sy、sw、sh；
//要找到原始宽度，我们需要覆盖宽度和高度
var oldRuntimeWidth=image.runtimeStyle.width；
var oldRuntimeHeight=image.runtimeStyle.height；
image.runtimeStyle.width='auto'；
image.runtimeStyle.height='auto'；
//获得原始尺寸
var w=图像宽度；
var h=图像高度；
//并清除溢出物
image.runtimeStyle.width=旧RuntimeWidth；
image.runtimeStyle.height=旧RuntimeHeight；
if（arguments.length==3）{
dx=参数[1]；
dy=参数[2]；
sx=sy=0；
sw=dw=w；
sh=dh=h；
}else if（arguments.length==5）{
dx=参数[1]；
dy=参数[2]；
dw=参数[3]；
dh=参数[4]；
sx=sy=0；
sw=w；
sh=h；
}else if（arguments.length==9）{
sx=参数[1]；
sy=参数[2]；
sw=参数[3]；
sh=参数[4]；
dx=参数[5]；
dy=参数[6]；
dw=参数[7]；
dh=参数[8]；
}否则{
抛出错误（“参数数无效”）；
}
///////////////////////////改性钻头///////////////////////////
var vmlStr=[]；
vmlStr.推力（“”）；
///////////////////////////修改钻头的末端///////////////////////////
this.element_u.insertAdjacentHTML（'BeforeEnd'，
vmlStr.join（“”）；
};
它所做的只是直接在伪画布中创建一个VML图像，而不是像最初那样将其包装在一个组中。出于某种原因，原始代码导致图像周围出现左上角的填充，但无法找出原因。在我们了解原因之前，我们将无法找到合适的解决方案…感谢您的回复！不幸的是，我们不得不快速前进，将数据扔到服务器上。如果我有空的话，我会试试你的代码。再次感谢您抽出时间回答问题！：D