- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我为我的 map 应用程序创建了一个小插件。该插件向几何特征添加文本标签。看起来像这样:
在上面的屏幕上,您可以看到 map 、水平线串和文本标签。我使用 canvas
、canvas.getContext("2d")
和一堆标准函数(如 ctx.StrokeText
、)创建了这个标签>ctx.fillText
等。我现在面临的问题是屏幕上的线串是交互式的或可移动的,我希望我的标签也能移动。我不是在问我的问题的确切解决方案。我感兴趣的是如何获取背景像素(就在我的文本标签下方),以便我可以在“移动”或在新位置重新绘制标签之前恢复它们。如果您可以提供一个很小的示例,其中您有一些背景,然后绘制一些对象,然后“删除”它,那就太好了。
最佳答案
您可能想使用 context.getImageData 和 context.putImageData
假设您的 Canvas 的 ID 为“myCanvas”,调用 doDraw() 将导致黑色矩形在复杂的背景上闪烁。
首先,在doDraw()中绘制背景。然后,在drawRectangle()中捕获要被矩形覆盖的背景并将其保存在变量“imageData”中。然后在背景上绘制矩形。然后,1秒后,调用eraseRectangle(),并且调用putImageData()来替换背景。
在这个 fiddle 中:
https://jsfiddle.net/f3Luxcoc/
这是 JavaScript:
//coordinates of rectangle
var xp = 20;
var yp = 20;
var wp = 80;
var hp = 80;
//saved background image
var imageData = null;
function doDraw() {
var can = document.getElementById("myCanvas");
can.width = 500;
can.height = 500;
var context = can.getContext("2d");
//draw background contents
var image = getImage();
context.drawImage(image, 0, 0);
context.drawImage(image, 100, 0);
context.drawImage(image, 0, 100);
context.drawImage(image, 100, 100);
drawRectangle();
}
function drawRectangle() {
var can = document.getElementById("myCanvas");
var context = can.getContext("2d");
//capture background
imageData = context.getImageData(xp, yp, wp, hp);
//draw Rectangle
context.rect(xp, yp, wp, hp);
context.fill();
setTimeout(function() {
eraseRectangle();
}, 1000);
}
function eraseRectangle() {
var can = document.getElementById("myCanvas");
var context = can.getContext("2d");
context.putImageData(imageData, xp, yp);
setTimeout(function() {
drawRectangle();
}, 1000);
}
doDraw();
function getImage() {
var image1 = new Image(237, 110);
image1.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO0AAABuCAMAAAD8t2TLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAC1QTFRF////LVcpkauOZYdhrsStx9jF1uTV+//66PPn8vzy4uji7vft4O3f+P/38fPwC7dd6gAACdxJREFUeNrsXIti2yoMNYiHiSH//7kXCXD8AmTaddudta1zEht0QOhIgnSaHnnkkUceeeSRv1vszzRlv7OjL2hoUZEwTSHUNHIsoLYJ1oYBvE2tjnfu1Nw85DbNWCVAxysvgS7OgxEcR8vglfINtDJ1cxNuRaur7t1OTUfoSPtNM1GLKHqaBUk4aakBP+73plBC9XONrbP03opJWs3dG1FLoT6vVeqMtFeTBZFQkhYCbEILFS37es2Etq6W4up99dTSXUewmyvrduj8RFMaYauMNtD/8ro/sN+FdhlB2x3sEBJas5ujFZ2c/O61CGl0TKW/8E1oYfolaO0idpOVp3qdy5AuVrRzuqGy3hgG6H4J2jJHXWcmxNYGk6FGS07rXtrkp4plRzj6utklW353eA3DSzH0PnsflitXeyertiBV5FfioNyeJDTB1dSUthc4xL+z0q6n90A8gEzCoVxZYJSXH5BIsvgZtRN6w6tyBFJFq2kAeyFCmIbEah7lhn2AswEp87wrIQ0n2lLN/nSxm6+GCNf+j70GYoBjdvFMcryFZMlxM+DmCKRNdr4TIuhBtIHr35boOPTRUxxpSH/VM2a0S8eDqEG0qXnorwONftKeu1V5jhUPrWpqa3uD/0W0+fl+PHWIXfPcFkvOEQUXbe2+atD5PWhLKD/z0No9C5CbTsFyqMRPl5Zcd7oOoAnmS+vW2uwk+4Pi9JED14kmcjWy75MDeSk511gP/X5YTIsSk08eqRuEKRBx2v6gBNtMsB2PA4MP1NQsL1nEOmcWojq8pxcjzHcn1kCb3A7pc8u+OByI3UkypmuWoUULsERzx/lvxgjNG+rUxwlcdWetKF60n5MHX0lPs4sSnhRrBFTZr99Dmxtn5Imq4wfVjWZKsn+R+eV0wyX/3uPkm64qN86ILDhouc1AnVML9yf/Dp10+yYN5TH6YbSFmutoc22klvaXdPsu6ep2RPBx1r11q3l9q22yr2oKSZsXtmun2wMhhsFaol3ZLhwSzfmjRtN1AystIQpAlwuXaS727xflyaEAkrutZVGCF8pcPJ2qpZQ4+pDpbKKCIsxEoimhJKJshR8Bb2mXpIN3HhuxmXftoQUfiko4B1ExexUPJb6WfgAsWiGFUhikCMC4dy2eUrKwKRarVnElKqDmdkmawMRRoQDiSOHUY+zQKDI3lw3ggjblPJ7Ny7QElm1Oowo7ldqTSJW2eh/pcTAdKzaTkwAg3dkV6I0/1kUdfTfO5mV8mRYyWrCLONSIXXOlWAcdCiyZngGUnCDC8YbsoTbq3MuhmLXisCubFspb0eZ6oqy3M4bWnlhOHdS5lx93fVQJ49QW3nLY7XDFBDpR6E2026WhPkHjVp3vRZssB5+GTXbuM/V90lfRqfPrDinoHdr5XEnXG5tC71Sphahh8ilUnVyfhTU7TxZrwiZ9LXlllYCa+W0hSU1eCncr02u/K+KWooBave91ukWlzoFVixjpWTfbizT9k76W+ngr/218PqWkViZXkfPTFU0u3tKo2oCDHDTqYyuuhtoYSOd92mQO3pi5nb42ybyX/8aJRJK0h/zUfopvngwpZvPExbPWmt4IZrmg3LRFcRdu5ECgcM2g9PJJM5z/Zk63hxr2B2zun7gdfJxZkmgRl3rNQvCKEGcU0ZgSWBMGq6L9HEnv0/dC5vMebVj7WdEu+P5SyYH0ANroZp1hze042sOmWSHn8DHNK7TGpve9veZ2NYJWp6H1YfrFaOEYv21s8wqtn+wL33/Z67z8LtoUmtIQNo+6aMHIb7to1SGP3bS3JNsq/VhCG7KFn41Oj3GuTAbVzOVKpVxnrqg11MoIyKfvEjzvtulrHG/yvaWf4LWnmu5ifDinwXZw/1Zxn6K+G4OSU+N6OJ62eg95NeW6lpq3h/3fsq98PClGifRoxke9KI5RONz20vVewhL/NCJUediF1olE4hgutuzr68POi07kq9w+DR7fvy1JdHdyVfvoR4x/BdSt+cSRNoWIQUkUd/IN5XXAQTbfFScrZgF9bqPNuUstJTxzJKGFKRBYaU6erLym8zWfuRz0x3efbqMt+XDVSI4cmdL1yAf30IbwFbTlacm15NCuXYBjjmreMAhWcdCu3X5qKkNTm5/uLVybzpXWj/UsGe3C5WxfsnZCu5w4dF23CNYfd3MG122pu7sOWKIQ20hfZwWNomM+xSuPXO+nJcLFx+yxaLpyr9mN8VoCHYKLWna3mctpoanDp43893xDPkkUMteeKbSc5bLX79+nXOsSW3OqsM0yTD//Pd9g14J5bSuiwq2DnBt9hzT9MfI916A4+e/Fhq0uBfvr1mvxuRmrslrgnB7qO0LW/u55g3d/8texc6+xM6y5Rt11512SY6GFKppaRbyD9u7CZR77sz+C9lysbqO9e/Z8PTTOCy/NaF2qtjD1rkJ/LlY31y2o2zTEPNJVDuzaxue6VcatfJ45tey8VfPqcM5vY0ASffqyBj+sr0QBsxTdK+K2Nm59Y2M38WmqwNY+D7sqEm3gYk3ayRi5pf3lgCeIE6d3C+i8L0BRLDQQwShoVkPz6evQzkiXDdj8DSuVMlUM4kAaekOq7nerIgrgnCIY5DjH2Q2Tlk3Vu29Y0akGEj/5vMHUR8E+IXI/9+CdR+7tDR7PzsoUA4CzMqHVGbZmoGBM7iDaDnkFHpXDiWvpqDvgnuB9tIxvJA2iDe0wjBmmndHSdjbImFffQquZRD34HZzeyYFZcCxZHf2HWJDU8BgH7Ndtj025h3HU6HkH2azitveF8/HYo49HtzVryt2W6JJBLfRBdM7daQt8teU0IuFrn4cLPczVDa0K70hdZ/ozJEyPPPLII4888sgjjzzyyCOPPMKUfCBD8O5WeN9LpMJCvJbvCX+xAKbep2Qc/ki8qFZSdlO1MNc7iQVtAQP4gJQbtOuv6Yk3XPzKntHCyC9Ay5/bjPaFeOjHXza3IOCthTblmJGQ6+ULq5zidYEWvyoRp1aYD1qAV1wX8cl4Q/wUrzWdoEttxS7oWyo0x/T9EZEOi8bXKv5UP4NWRSWjKlK8UvkSFcqXEel7RVsqsIQWpIR3vE3u0cI7vixo4893fOCdgBDaV8Qau3vH1RKHFH/zDf7TsQuTuvkBSya0cb2+1rlNlzSV6nJuhXqLeIF/t2hxY/qV0b5wJD9HChAtUGtCKvGmniEPHPMA2zeipZlMaMtlHS3OBBC2HtrNb19roP1JL5UsGbLJCble7ix5ixafQpWNME200QCmdyqOb9FuLVli7/gVsR+15FfZjcGVlS+rXoomReZFnu++QnvwUgXtb/FSf4b8bh7+MXmRy9b/CFpctP/M1GKcKvX0yCOPPPLI/0P+E2AAA7JN+/OU8bgAAAAASUVORK5CYII="
return image1;
}
关于javascript - Canvas 。绘图前如何获取背景像素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38433975/
为什么这个脚本不起作用?仅当页面宽度超过 915 像素时,我希望单击按钮时滚动页面 100 像素。我试图通过仅在宽度超过 915 像素时允许该函数运行来实现此目的,但它没有发生。怎么办? $(docu
我需要您帮助我建立一个网站。我是一个新手,已经得到了一个设计为 900 像素宽的主体,但他们给了我一个 1200 像素宽的图像。他们希望图像跨越整个 1200 像素的宽度,因此页面两侧基本上会有 30
我有一个在 y 轴上展开的 UIScrollview 并调用这个委托(delegate)方法: -(void)scrollViewDidScroll:(UIScrollView *)scrollVie
我有一个固定的标题这个标题在我滚动时改变高度和图像标志但是当我调整窗口大小时我希望图像保持比例但随着我缩小浏览器而变得更小标志只有在限制时缩小浏览器靠近图像,但我希望在调整浏览器大小时图像变小。 我该
在我的项目中,我使用 ArcGIS API for JavaScript https://developers.arcgis.com/javascript/但是对于(在这里插入非常大的坏词)我无法覆盖
有没有办法使用 jQuery,根据窗口滚动的距离做不同的事情? 这是我现在使用的代码; $(document).scroll(function() { // If scroll distanc
这基本上是 Jetpack Joyride 中运动的基本版本,但不是 Joyrider 以每秒 100 像素的速度下降,而是字母“x”从控制台的正中间以每秒 100 像素的速度下降和点击事件会导致它以
我像这样处理 MINMAXINFO: case WM_GETMINMAXINFO: { LPMINMAXINFO p_info = (LPMINMAXINFO)lPar
我对 javascript 有点陌生,我一直在查找 documentElement、clientWidth 和 clientHeight 并试图找出为什么它将我的 Canvas 设置为 300px x
我正在编写一些软件来读取 DICOM 文件,但我不确定如何处理具有未定义长度的标签。标准是这样说的 “如果值字段具有显式长度,则值长度字段应包含等于长度(以字节为单位)的值 值字段。否则,值字段 有一
我对 OpenGL 有点陌生,但我很确定我的问题在于所使用的像素格式,或者我的纹理是如何生成的...... 我正在使用 16 位 RGB5_A1 像素格式在平面 2D 四边形上绘制纹理,但在这个阶段我
有没有办法获取直播电视流,例如在像素级别上进行分析。 我的目标是检查直播电视流(例如使用java),例如广播电台 Logo 是否可见。 有机会通过 Google 电视观看此直播吗? 是否有机会通过笔记
我正在尝试构建一个函数,它以给定角度从特定坐标延伸,并循环遍历该线上的像素,直到遇到黑色像素. 如果角度为 180 度,这很容易实现。在这种情况下,搜索只会向下扩展,在每次迭代中将列坐标加 1。然而,
我已经研究了一段时间,但找不到任何解决方案。 这是我的代码 如果您将此代码复制并粘贴到本网站的 HTML 区域:http://jsfiddle.net/T3Nnu/3/ 如果您查看 Facebo
我有一个网页 - http://bit.ly/YHFX5B如果你看一下页脚,你会发现它后面有一些额外的白色像素/线条。我不明白他们是从哪里来的。 请告知他们可能来自哪里。 谢谢,丹 最佳答案 在 #f
如何在没有状态栏和操作栏的情况下获取屏幕高度(像素)或者如果有人告诉我如何获取状态栏和操作栏的高度,它也会有所帮助。我已经找到了屏幕高度,但它包括状态栏和操作栏.我将支持库 v7 用于操作栏。我在网上
Java 字符串根据宽度(像素)换行 在一些场景下,我们经常会通过判断字符串的长度,比如个数来实现换行,但是中文、英文、数字、其实在展示的时候同样长度的字符串,其实它的宽度是不一样的,这也是们我通
我创建了一个不错的简单可扩展列表。它应该像单选列表一样工作,您应该只能选择一个元素。我还没有实现这部分,因为我对列表的大小有疑问: class ExpandableListRadio extends
我使用以下代码滚动到元素顶部,但我想滚动到元素顶部上方 10px,不知道如何执行此操作,有什么建议吗?谢谢! $('html, body').stop(true,true).animate({
我有一个链接,可以在滚动时更改其垂直位置。当我点击此链接时,我想(平滑地)转到页面上的某个位置,该位置距离页面顶部正好 1080 像素。 我无法实现它,希望有人能帮助我。 链接: 脚本: $(do
我是一名优秀的程序员,十分优秀!