注意:这与现有 Canvas 元素在放大时的呈现方式有关，不处理如何将线条或图形呈现到 Canvas 表面。换句话说，这与缩放元素的插值有关，与在 Canvas 上绘制的图形的抗锯齿无关。我不关心浏览器如何画线；我关心浏览器在放大时如何呈现 Canvas 元素本身。
是否有 Canvas 属性或浏览器设置我可以通过编程方式更改以在缩放时禁用插值 <canvas>元素？跨浏览器的解决方案是理想的，但不是必需的；基于 Webkit 的浏览器是我的主要目标。性能非常重要。
This question最相似但没有充分说明问题。对于它的值(value)，我已经尝试过 image-rendering: -webkit-optimize-contrast无济于事。
该应用程序将是一个用 HTML5+JS 编写的“复古”8 位风格游戏，以明确我需要什么。
为了说明，这里有一个例子。 ( live version )
假设我有一个 21x21 的 Canvas ...
<canvas id='b' width='21' height='21'></canvas>
...具有使元素大 5 倍 (105x105) 的 css:
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */
我像这样在 Canvas 上画了一个简单的“X”:
$('canvas').each(function () {
var ctx = this.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(21,21);
ctx.moveTo(0,21);
ctx.lineTo(21,0);
ctx.stroke();
});
左边的图像是 Chromium (14.0) 渲染的。右边的图像是我想要的(为了说明目的而手绘)。
最佳答案
Is there a canvas property or browser setting I can change programmatically to disable interpolation when scaling elements?
答案是也许有一天。现在，您将不得不求助于 hack-arounds 来获得您想要的东西。
图像渲染 The working draft of CSS3 outlines a new property, image-rendering那应该做我想做的:
The image-rendering property provides a hint to the user-agent about what aspects of an image are most important to preserve when the image is scaled, to aid the user-agent in the choice of an appropriate scaling algorithm.
规范概述了三个可接受的值:auto、crisp-edges 和pixelated。
pixelated:
When scaling the image up, the "nearest neighbor" or similar algorithm must be used, so that the image appears to be simply composed of very large pixels. When scaling down, this is the same as auto.
因为这只是一个工作草案，所以不能保证它会成为标准。浏览器支持目前充其量是不稳定的。
Mozilla 开发者网络有 a pretty thorough page dedicated to the current state of the art我强烈推荐阅读。
Webkit 开发人员最初选择了 tentatively implement this as -webkit-optimize-contrast , 但 Chromium/Chrome 似乎没有使用实现此功能的 Webkit 版本。
更新:2014-09-12
Chrome 38 now supports image-rendering: pixelated !
Firefox 有一个 bug report打开以获得 image-rendering: pixelated 实现，但 -moz-crisp-edges 现在可以工作。
到目前为止，最跨平台的、纯 CSS 的解决方案是:
canvas {
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
image-rendering: pixelated; /* Awesome future-browsers */
-ms-interpolation-mode: nearest-neighbor; /* IE */
}
遗憾的是，这还不能在所有主要的 HTML5 平台上运行(尤其是 Chrome)。
当然，可以在 javascript 中使用最近邻插值将图像手动放大到高分辨率 Canvas 表面，甚至可以在服务器端预先缩放图像，但在我的情况下，这将非常昂贵，因此它不是可行的选择。
ImpactJS使用纹理预缩放技术来解决所有这些 FUD。 Impact 的开发人员 Dominic Szablewski，wrote a very in-depth article about this (他甚至在他的研究中引用了这个问题)。
参见 Simon's answer对于依赖于 imageSmoothingEnabled 属性的基于 Canvas 的解决方案(在旧浏览器中不可用，但比预缩放更简单并且得到广泛支持)。
如果您想测试 MDN 文章中关于 canvas 元素的 CSS 属性，我已经制作了 this fiddle它应该显示类似这样的内容，模糊与否，具体取决于您的浏览器:
关于javascript - 缩放 <canvas> 时禁用插值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7615009/
我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll
大家好!我对我的:username字段进行了一个小的验证，它应该是4到30个字符。我写了一个验证::length=>{:within=>4..30,:message=>I18n.t('activerecord.errors.range')-我想显示一个错误各种错误的消息(不像，太长或太短)，但这里有一个问题-我可以将最小值和最大值都传递给翻译，以便有类似的东西:用户名应该在4到30个字符之间。目前我有:range:"shouldbebetween%{count}and%{count}characters"，这显然不起作用(只是为了检查)。是否可以从范围中获取这些值？谢谢大家的指教!
是否可以在PyYAML或Ruby的Psych引擎中禁用创建anchor和引用(并有效地显式列出冗余数据)？也许我在网上搜索时遗漏了一些东西，但在Psych中似乎没有太多可用的选项，而且我也无法确定PyYAML是否允许这样做.基本原理是我必须序列化一些数据并将其以可读的形式传递给一个不是真正的技术同事进行手动验证。有些数据是多余的，但我需要以最明确的方式列出它们以提高可读性(anchor和引用是提高效率的好概念，但不是人类可读性)。Ruby和Python是我选择的工具，但如果有其他一些相当简单的方法来“展开”YAML文档，它可能就可以了。 最佳答案
我在一个我想在formtasticGem中覆盖的方法中找到了这个。该方法如下所示:defto_htmlinput_wrappingdohidden_field_html是什么意思？在第三行做什么？我知道它对数组有什么作用，但在这里我不知道。 最佳答案 你可以这样读:hidden_field_htmllabel_with_nested_checkbox是连接到hidden_field_html末尾的参数-为了“清晰”，他们将其分成两行 关于ruby-on-rails-没有参数的`
我已经看到了一些其他的问题，尝试了他们的建议，但没有一个对我有用。我已经使用Rails大约一年了，刚刚开始一个新的Rails项目，突然遇到了问题。我卸载并尝试重新安装所有Ruby和Rails。Ruby很好，但Rails不行。当我输入railss时，我得到了can'tfindgemrailties。我当前的Ruby版本是ruby2.2.2p95(2015-04-13修订版50295)[x86_64-darwin15]，尽管我一直在尝试通过rbenv设置ruby2.3.0。如果我尝试rails-v查看我正在运行的版本，我会得到同样的错误。我使用的是MacOSXElCapitan版本10
Devise是一个Ruby库，它为我提供了这个User类:classUser当写入:confirmable时，注册时会发送一封确认邮件。上周我不得不批量创建300个用户，所以我在恢复之前注释掉了:confirmable几分钟。现在我正在为用户批量创建创建一个UI，因此我需要即时添加/删除:confirmable。(我也可以直接修改Devise的源码，但我宁愿不去调和它)问题:如何即时添加/删除:confirmable？ 最佳答案 WayneConrad的解决方案:user=User.newuser.skip_confirmation
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证＆符号不会被转义？由于我无法控制的原因，我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清，我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://