0

我在画布上绘制图像时遇到问题（希望得到一些帮助）:)

我正在构建一个应用程序，让用户选择图像然后在其上绘图。我正在使用画布来渲染它。问题是这样的：当我选择了一个图像时，我在画布上绘制了图像（在屏幕上居中），但是正如你在我的屏幕截图中看到的那样，它绘制了两次 - 其中一个在画布之外（窗口位置 0,0)。

这是android webview中的一个小故障吗？

（我正在使用 Cordova/Phonegap 2.7）

HTML：

<div class="box_canvas box_canvas_doodle shadowbox50">
<canvas id="canvas_doodle" />
</div>

JAVASCRIPT（片段）：

$(".box_canvas_doodle").css( "left", Math.floor(($(window).width()-image_resized_wid)/2) );
$(".box_canvas_doodle").css( "top", Math.floor(($(window).height()-48-image_resized_hei)/2) );

// Clear
doo.ctx.doodle.clearRect(0, 0, doo.canvas.doodle.width, doo.canvas.doodle.height);

// Draw image
doo.ctx.doodle.drawImage(doo.imageElem, 0, 0, doo.imageElem.width, doo.imageElem.height, 0, 0, doo.canvas.doodle.width, doo.canvas.doodle.height);

截图 http://storage.rejh.nl/_stored/Screenshot_2013-07-25-08-36-53.png

4

2 回答 2

0

好的，解决方法也在一段时间后中断（不知道为什么）。我现在重建了它，使画布全屏显示，并在中心绘制图像（而不是移动画布）和顶部的标题。席子。

于 2013-07-27T15:09:51.460 回答
0

好的，我想我找到了问题所在。在许多情况下，“位置：相对；” 有一些奇怪的后果。我已将其设置为“位置：绝对；” （对于包裹画布的 div 'box_canvas_doodle'），现在它可以正确渲染画布。

...html 为什么你是这样的 &^&#^()__*@

于 2013-07-25T07:14:54.630 回答