cocos2d-js 使用正片叠底实现图片剪裁

现实中需要实现把已知大图剪裁成规定圆形图片，需要使用一个圆形背景和已知大图进行正片叠底，圆形背景除了中间的圆其他地方为黑色，这样融合后黑色吞掉圆形区域外的颜色，达到剪裁效果
黑色背景图如下：

步骤如下：
传入参数，背景，遮罩，尺寸，target等

ChapterInfoManager.getTextureByHeroBody = function (chapter_info,target) {var key_path = ChapterInfoManager._local_image_key+ "_Card_" +chapter_info.icon_body + ".png";var blend_iamge_path  = chapter_info.icon_image_path;var mask_image_path = "res/ui/common/Temporary-head-2.png";var size_render = cc.size(313,314);var blend_conf = chapter_info.blend_conf;var texture_conf = HelpTool.createTextureAndSaveLocal(key_path,blend_iamge_path,mask_image_path,blend_conf,size_render);if(target && texture_conf.texture){target.loadTextureFromMemory(texture_conf.texture);target.setScaleY(texture_conf.flip);}return texture_conf.texture;
}

根据texture从本地读取并存储

HelpTool.createTextureAndSaveLocal = function (keyPath,bImagePath,mImagePath,bConf,sRender,bf) {var _texture = null;var flip = 1.0;if(_texture = HelpTool.getImageFromLocal(keyPath)){flip = 1.0;}else{var renderTexture = HelpTool.blendImage(mImagePath,bImagePath,bConf,sRender,bf);if(_texture =HelpTool.saveImageToLocal(renderTexture,keyPath)){flip = -1.0;}else{_texture = HelpTool.blendImage(mImagePath,bImagePath,bConf,sRender,bf).getSprite().getTexture();flip = -1.0;}}return {texture:_texture,flip:flip};
};

HelpTool.getImageFromLocal = function(name){var data_path = jsb.fileUtils.getWritablePath()+ name;var bRet =null;if(jsb.fileUtils.isFileExist(data_path)){var temp_sprite = cc.Sprite.create(data_path);if(temp_sprite){return temp_sprite.getTexture();}else{return null;}}else{bRet= null;}return bRet;
}

HelpTool.saveImageToLocal = function(renderTexture,keyPath){if(renderTexture && keyPath){renderTexture.saveToFile(keyPath);var sprite =  renderTexture.getSprite();return sprite.getTexture();}return false;
}

最重要的一步，根据地图和遮罩，尺寸，缩放遮罩，根据坐标偏移混合配置进行texture混合并返回

HelpTool.blendImage = function (maskImg,bImg,bconf,renderSize,bf) {var size_render = renderSize? renderSize : cc.size(313,314);var blend_conf = bconf ? bconf : {x:0,y:0,s:1.0};var mask_blend_conf = bf ? bf : { src: cc.ZERO, dst: cc.ONE_MINUS_SRC_ALPHA };var mask_sprite = cc.Sprite.create(maskImg);var blend_pos = cc.p(size_render.width * 0.5, size_render.height * 0.5);mask_sprite.setPosition(blend_pos);mask_sprite.setScale(size_render.width / mask_sprite.getContentSize().width);mask_sprite.setBlendFunc(mask_blend_conf);var head_sprite = cc.Sprite.create(bImg);head_sprite.setPosition(cc.p(size_render.width * 0.5 + blend_conf.x, size_render.height * 0.2 + blend_conf.y));head_sprite.setScale(blend_conf.s);var renderTexture = cc.RenderTexture.create(size_render.width, size_render.height);if (null != renderTexture) {renderTexture.begin();head_sprite.visit();mask_sprite.visit();renderTexture.end();}return renderTexture;
}

cocos2d-js 使用正片叠底实现图片剪裁相关推荐

[js] 使用js实现一个图片剪裁的功能
[js] 使用js实现一个图片剪裁的功能 /** * 裁切图片* @param imgUrl 原始图片路径* @param x,y,width,height 从点[x, y]开始,将宽度width,高 ...
JS实现选择图片剪裁及保存
JS实现选择图片剪裁及保存以下是一个简单的示例代码,实现了显示一个文件上传框和一个canvas元素.用户可以选择一张图片文件后,该图像将显示在canvas中,并且用户可以通过鼠标拖拽来选取需要剪裁的 ...
html中剪切图片所用插件,简单功能强大的jQuery图片剪裁插件Image Cropper
插件描述:相信很多朋友都在大型的网站,如新浪微博.QQ微博上看到过头像裁图工具,感觉很高大尚吧,今天朋友们有福了,今天就来说一说一款这么高大尚的插件cropper,cropper是一款使用简单且功能强 ...
移动端图片剪裁工具cropperjs
第三方依赖:cropperjs 适用于原生js,jquery,vue及其他框架. 下载: npm install cropperjs 引入css及js: import 'cropperjs/dist/ ...
基于vue的图片剪裁工具vue-croppe
基于vue的图片剪裁工具vue-croppe 安装 // npm安装 npm install --save vue-croppa // yarn 安装 yarn add vue-croppa 使用引 ...
cropper简单且功能强大的图片剪裁jQuery插件
cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. cropper提供了大量的参数 ...
html图片自动剪裁,jQuery简单且功能强大的图片剪裁插件
cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. croppe ...
html 图片剪裁工具_HTML5图像裁剪工具
html 图片剪裁工具 HTML5 image crop tool I have prepared new great HTML5 tool for you (with tutorial). I ha ...
php裁剪插件,简单功能强大的jQuery图片剪裁插件Image Cropper 中文api
图片剪裁插件Image Cropper使用方法引入必要的js和css核心文件构建html,可以将图片或canvas直接包裹到一个块级元素中初始化插件,可以使用$.fn.cropper方法来初始化 ...

cocos2d-js 使用正片叠底实现图片剪裁

cocos2d-js 使用正片叠底实现图片剪裁相关推荐

最新文章

热门文章