cocos creator 怎么获取图片像素值

Creator 2.x
#6

能不能来个人跟我讨论下 怎么没人了:6:

#7

动态的区域判断还是静态的呢？
静态可以提前制作碰撞遮罩图片，将点击坐标映射到遮罩贴图上，取当前uv的alpha通道判断是不是透明的。
动态的话，先渲染到rendertexture上，然后把rendertexture绘制到canvas上，然后canvas.getContext(“2d”).getImageData(0, 0, w, h);取到这块区域的像素，剩下的和上面一样了。

#8

web上和native取ImageData的方式不同，native会更好拿，直接用rendertexture的newImage接口取到Image对象判断

#9

静态的 我想知道怎么取图片的alpha 没看到哪里可以获取到:6:

#10

有获取图片点击坐标的图片信息的方法吗 我好根据它的alpha判断是否透明 现在就是没看到能获取的方法

#11

var img = texture.getHtmlElementObj();
var ctx = canvas.getContext(“2d”);
var r = spriteFrameRect;
ctx.drawImage(img, r.left, r.top, r.width, r.height, 0, 0, width, height);
var mask = ctx.getImageData(0, 0, c.width, c.height);
var hitMask = { width: width, data: new Int8Array(c.width * c.height) };
for (var i = 0; i < mask.width * mask.height; i++)
hitMask.data[i] = mask.data[i * 4 + 3] > threshold ? 1 : 0;

https://developer.mozilla.org/zh-CN/docs/Web/API/ImageData

这个是web上的大概的思路，ccc还没用过。不知道接口对不对。
如果贴图很大会卡顿的话，可以把canvas尺寸等比缩小，渲染到一张小纹理上，坐标等比缩放去取颜色值，误差不大。

#12

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/getImageData

#14

好的 谢谢 我去试一下

#15

怎麽樣？能行嗎？我試過不行

#16

这个需求应该用顶点坐标判断啊，区域点击，你要精确到像素？你的像素有你手指大？

1赞
#17

可以看一看我写的组件，RenderTexture和Canvas两种方式在web上都是可以的
https://forum.cocos.com/t/creator/38530/31

#18

我上面只是举个简单的例子 实际需求比这个复杂 是要获取像素 一般静态需求是可以用碰撞遮罩或者区域判断

#19

我最终是转到cocos 调用 C++解决的 好像cc1.X版本不能实现像素获取 现在刚用2.0版本看看

#20

哈哈哈哈 兄弟你要是早点回我就好了 还没试过你的方法 但是看了你的贴 的确是能实现我的需求 当时找了好久竟然没过你的贴 我最终是转到cocos 用C++解决的 谢谢了

#21

哈哈，我这个是最近有这个需求才写的，你发帖的时候，我还没写呢，所以当然找不到啦。。我这个应该全平台都通用了，只是在微信和qq上有点消耗内存，另外对spriteframe的限制比较多。。

#22

在native上怎么获取，我获取的时候都报错
模拟器上我用的textureRender 方式，会报错

                 var rt = dataContainer
                if (!rt){
                    rt = new cc.RenderTexture()
                    rt.initWithSize(tex.width, tex.height)
                    rt.drawTextureAt(tex, 0, 0)
                    _textureIdMapDataContainer[tex.getId()] = rt
                }
    
               // data就是这个texture的rgba值数组
                if (spriteFrame.isRotated()) {
                    data = rt.readPixels(null, rect.x + posInRect.y, rect.y + posInRect.x, 1, 1)
                    //cc.log(type + "--", "data", data, rect.x + posInRect.y, rect.y + posInRect.x)
                }
                else {
                    data = rt.readPixels(null, rect.x + posInRect.x, rect.y + rect.height - posInRect.y, 1, 1)
                    //cc.log(type + "--", "data", data, rect.x + posInRect.x, rect.y + rect.height - posInRect.y)
                }

Simulator: [ERROR] (/Users/nantas/fireball-x/cocos2d-x-lite_21/cocos/scripting/js-bindings/manual/jsb_opengl_manual.cpp, 1888): glReadPixels((GLint)arg0 , (GLint)arg1 , (GLsizei)arg2 , (GLsizei)arg3 , (GLenum)arg4 , (GLenum)arg5 , (GLvoid*)arg6 ); GL error 0x506: GL_INVALID_FRAMEBUFFER_OPERATION
[ERROR] Failed to invoke JSB_glReadPixels, location: /Users/nantas/fireball-x/cocos2d-x-lite_21/cocos/scripting/js-bindings/manual/jsb_opengl_manual.cpp:1892
at HTMLElement.print-simulator-log (/Applications/CocosCreator.app/Contents/Resources/app.asar/editor/builtin/scene/panel/messages/scene.js:1:1669)
at Object.e._dispatch (/Applications/CocosCreator.app/Contents/Resources/app.asar/editor-framework/lib/renderer/panel.js:1:1941)
at EventEmitter.o.on.s (/Applications/CocosCreator.app/Contents/Resources/app.asar/editor-framework/lib/renderer/ipc.js:1:2921)
at emitMany (events.js:127:13)
at EventEmitter.emit (events.js:204:7)

#23

cocos里面也有getImageData嘛？

#24

这个是h5接口，原生要用rdt->newImage()->getData()

#25

先预生成多边形，然后用 cc.Intersection.pointInPolygon 判断如何

#26

carera.renderTexture = texture //texture一像素即可
carera.render() //需要检测的图片设置group和camera对应
var data =texture.readPixels()
if(data[0] !=0){
//点击非透明
}