个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
如果在已经具有非整数比例因子的 Canvas 上绘制图像，我会遇到 Canvas 上下文drawImage()方法的问题。似乎这样的图像以一种奇怪的方式被剪切(有时图像的最右边的部分被剪切，有时是最底部的部分，有时两者都被剪切)。这个问题至少出现在 Google Chrome 6(至少稳定)、Chromium 6，甚至最新的(开发)版本中，甚至 Safari 5 中。Firefox 没有这个错误。显然，如果我没记错的话，这是一个Webkit问题。让我们看一下下面的代码(提供了演示的完整代码):
<html>
<head>
<style type="text/css">
canvas {
border: solid 1px black;
}
</style>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("canvas");
var increase = document.getElementById("increase");
var decrease = document.getElementById("decrease");
var scale = document.getElementById("scale");
var context = canvas.getContext("2d");
var image = new Image();
image.src = "image-3x5.png";
var scaleX = 1;
var scaleY = 1;
var repaint = function() {
scale.innerHTML = scaleX + "; " + scaleY;
context.fillStyle = "#FFF";
context.fillRect(0, 0, 1000, 750);
context.drawImage(image, 0, 0, 3, 5);
};
var scaleXF = 1.2; // change both to 2 and it will be fixed
var scaleYF = 1.2;
decrease.onclick = function() {
scaleX /= scaleXF;
scaleY /= scaleYF;
context.scale(1 / scaleXF, 1 / scaleYF);
repaint();
};
increase.onclick = function() {
scaleX *= scaleXF;
scaleY *= scaleYF;
context.scale(scaleXF, scaleYF);
repaint();
};
repaint();
};
</script>
</head>
<body>
<div>
<span id="scale"></span>
</div>
<div>
<canvas id="canvas" width="1000" height="750"></canvas>
</div>
<div>
<input id="decrease" type="button" value="decrease" />
<input id="increase" type="button" value="increase" />
</div>
</body>
</html>
那么这是一个真正的错误吗？或者有什么解决办法吗？
提前致谢。
更新:
假设我们有以下 BASE64 编码的 3x5 图像:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAEklEQVR42mP4z8DwH4YZyOAAAMufHeNmMS0JAAAAAElFTkSuQmCC
最佳答案
你是对的，这是一个错误。
两者的区别
context.setTransform(1*55.206143891243606, 0, 0, 1*55.206143891243606, 0, 0);
和
context.setTransform(1*55, 0, 0, 1*55, 0, 0);
规模巨大。但仅限于绘制图像时。填充矩形时它可以正常工作。
我做了一些测试并制作了此页面来说明。前两个是drawImage，比例因子为55和55.206143891243606。它们显然看起来非常不同。
下面是另外两个具有相同比例因子和 fillRect 命令的 Canvas 。它们看起来不错。
http://simonsarris.com/misc/badscale.html
这应该报告给 chromium 问题跟踪器。如果你想做的话请告诉我，否则我会做。
顺便说一句，不错:D
关于canvas - Webkit canvas drawImage() 和 canvas 非整数比例因子错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4041876/
27
4
0
我正在尝试学习 Fortran，并且看到了很多不同的定义，我想知道他们是否正在尝试完成同样的事情。以下有什么区别？ 整数*4 整数(4) 整数(kind=4) 最佳答案 在 Fortran >=90
我以前从未编程过，最近(1 周前)才开始学习!第一门类(class)是函数式编程，使用 Haskell。 我有一项学校作业，我想通过删除一两个步骤来改进它，但我遇到了一个讨厌的错误。 基本上，我创建了
给定以下GraphQL请求和变量: 请求: query accounts($filter:AccountFilter, $first_:String, $skip_:Int) { accounts
我已经搜索了 StackOverflow，但找不到关于如何检查计算器应用程序的数字输入正则表达式的答案，该计算器应用程序将检查每个 keyup 的以下格式(jquery key up): 任何整数，例
类似于我上一篇致歉的文章，但没有那么长篇大论。基本上我想知道当每次重绘调用只重绘屏幕的一小部分时，优化重绘到 JFrame/JPanel 的最佳选择是什么。 此外，除了重绘重载之外，我并不是 100%
所以在我的教科书中有一个使用 f# 的递归函数的例子 let rec gcd = function | (0,n) -> n | (m,n) -> gcd(n % m,m);; 使用此功能，我的教科书
我有一个数据结构，例如表达式树或图形。我想添加一些“测量”功能，例如depth和 size . 如何最好地键入这些函数？ 我认为以下三个变体的用处大致相同: depth :: Expr -> Int
这样写比较好 int primitive1 = 3, primitive2 = 4; Integer a = new Integer(primitive1); Integer b = new Inte
我是 Java 8 新手，想根据键对 Map 进行排序，然后在值内对每个列表进行排序。 我试图寻找一种 Java 8 方法来对键和值进行排序。HashMap>映射 map.entrySet().str
这就是我的目标... vector ,int> > var_name (x, pair (y),int>); 其中 x 是 vector var_name 的大小，y 是对内 vector 的大小。
这里是 an answer to "How do I instantiate a Queue object in java?" , Queue is an interface. You can't i
这个问题在这里已经有了答案: Weird Integer boxing in Java (12 个答案) Why are autoboxed Integers and .getClass() val
我们可以使用 C++ STL 做这样的事情吗？如果是，我将如何初始化元素？我试图这样做，但没有成功。 pair,vector>p; p.first[0]=2; 最佳答案 Can we do som
您好，我正在尝试为百分比和整数数组中的数字找到索引。假设 arraynum = ['10%','250','20%','500'] 并且用户发送一个值 15%，这个数字在哪个范围内居住？我可以使用这段
我与三列有关系:ProductName、CategoryID 和 Price。我需要选择仅那些价格高于给定类别中平均产品价格的产品。(例如，当apple(ProductName)是fruit(Cate
我已经坚持了一段时间，我正在尝试将一些数据配对在一起。这是我的代码。 #include #include using namespace std; int main() { pair data(
我收到错误:'(Int, Int)' 与 'CGPoint' 不相同 如何将 (Int, Int) 转换为 CGPoint let zigzag = [(100,100), (100,150)
我在 .cpp 文件中发现了以下代码。我不理解涉及头文件的构造或语法。我确实认识到这些特定的头文件与 Android NDK 相关。但是，我认为这个问题是关于 C++ 语法的一般问题。这些在某种程度上
我将这些输入到 Scala 解释器中: val a : Integer = 1; val b : Integer = a + 1; 我收到消息: :5: error: type mismatch;
C++:vector>v(size);当我试图打印出值时显示 0 作为值，但是当未声明 vector 大小时它显示正确的输出？为什么这样？例如: int x; cin>>x; vector>v(x);
我是一名优秀的程序员,十分优秀！