相关疑难解决方法(0)

注意:这与放大时现有画布元素的渲染方式有关,而与线条或图形在画布表面上的渲染方式无关.换句话说,这与缩放元素的插值有关,而与在画布上绘制的图形的抗锯齿无关.我不关心浏览器如何绘制线条; 我在乎的浏览器如何呈现canvas元素本身,当它被放大.

是否有画布属性或浏览器设置我可以通过编程方式更改以在缩放<canvas>元素时禁用插值？跨浏览器解决方案是理想的,但不是必需的; 基于Webkit的浏览器是我的主要目标.表现非常重要.

这个问题最相似,但没有充分说明问题.对于它的价值,我试图image-rendering: -webkit-optimize-contrast无济于事.

该应用程序将是一个用HTML5 + JS编写的"复古"8位风格的游戏,以明确我需要的东西.

为了说明,这是一个例子.(现场版)

假设我有一个21x21画布......

<canvas id='b' width='21' height='21'></canvas>

...有css使元素大5倍(105x105):

canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */

我在画布上绘制一个简单的'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)渲染的图像.右边的图像是我想要的(手绘为了说明目的).

是否可以在JavaFX 2.2中的ImageView中渲染缩放图像而不应用任何平滑？我正在使用setSmooth(false)将50x50图像渲染到200x200 ImageView中,因此源图像中的每个像素都应映射到屏幕上的4x4正方形.

但是,生成的渲染仍然可以平滑所有16个目标像素上的源像素.有没有人知道如何在不手动将每个像素复制到新图像的情况下执行此操作？

我想在我的JavaFX应用程序中放入一个简单的光栅图形编辑器.
似乎无法使用它,javafx.scene.image.Image因为图形对象是只读的.
有人可以指出我该怎么做或者有些类可以直接访问像素图？

upd:编辑器没有必要快速响应,因此建议a-la 创建隐藏java.awt.Canvas,处理ImageView上的所有事件以在画布上绘制,通过某种方式创建来自画布的输出流以创建新的javafx Image并放置它到ImageView.