Question

所以，我在html5 canvas元素上使用sketch功能时遇到了一些问题。因此，可以在下面的jsfiddle链接中找到设置。注意：根据您的屏幕不动产，您可能需要展开结果窗格。

所以，我在这里看到一些画布调整大小的问题，但没有什么特别的东西可以真正帮助我。所以我想做的是使用画布，以便在背景图像上制作一些标记（包含在单独的div中）。

<div id="dvPage" style="background-color:#ffffff;"><img id="imgFull" src="http://s15.postimg.org/5zng0yvdn/sample_jsfiddle.png" alt="" border="0" style="width:25px;" /></div>
<div id="dvProtector" style="position:absolute;top:0px;left:0px;bottom:0px;right:0px;background: url('http://s15.postimg.org/5zng0yvdn/sample_jsfiddle.png') no-repeat -200px -200px;z-index:100;"></div>

正如您在jsfiddle中所看到的，您最初可以这样做，但在实际设计中，用户可以放大/缩小图像。在这样做时，您可以看到初始标记不会跟随图像（即如果您在“Sample Text to Underline”下划线然后点击resize，则下划线部分不再加下划线）。现在，我知道如何在发生这种情况时调整画布大小，但我不知道如何制作它以便标记跟随它。我确实看到某处我可以将标记转换为data / 64编码，并可能将其缩小。问题是它不能很好地缩放（像素化）。

此外，用户在放大/缩小后仍应能够制作标记。那么，有这样做的好方法吗？我听说过缩放图像但是在调整文档大小后继续标记文档时遇到了问题（鼠标偏离了标记）。任何帮助都会很棒。谢谢！

Answer 1

好吧，我明白了。所以我做了以下

var img = new Image();
img.src = myCanvas.toDataURL();
myCanvas.attr('width', newWidth);
myCanvas.attr('height', newHeight);
var context = myCanvas.getContext('2d')
context.drawImage(img, 0, 0, newWidth, newHeight);

现在这可以拉伸图像，使其不完美。这是我要去的解决方案。

Canvas Sketchpad重新调整大小问题

1 个答案: