cocos2d-x 2.2.0 图片选中聚焦 ,图片描边 CCClippingNode 实现

效果例如以下图

左边箭头是x方向翻转的。右边箭头有旋转和缩放action。

大概实现方法:用箭头作为遮罩层,底图是一个绘制的矩形,得到一个黄色箭头背景。在用schedule尾随要聚焦箭头动作。这个在电视端用遥控器上下左右选择聚焦有点用。

希望这个是对同学们有帮助,谢谢。

代码

#include "HelloWorldScene.h"

USING_NS_CC;

CCScene* HelloWorld::scene()
{
    // ‘scene‘ is an autorelease object
    CCScene *scene = CCScene::create();

    // ‘layer‘ is an autorelease object
    HelloWorld *layer = HelloWorld::create();

    // add layer as a child to scene
    scene->addChild(layer);

    // return the scene
    return scene;
}

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }

    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();

    CCSprite *stencil = CCSprite::create("f1.png");
    stencil->setFlipX(true);

    CCClippingNode *clipper = CCClippingNode::create();
    clipper->setAlphaThreshold(0.005f);
    clipper->setAnchorPoint(ccp(0.5, 0.5));
    clipper->setPosition( ccp(visibleSize.width / 2 - 50, visibleSize.height / 2 - 50) );
    clipper->setStencil(stencil);

    this->addChild(clipper,0,cliper_tag);

    CCNode *content = shape(stencil->getContentSize());
    clipper->addChild(content,0,content_tag);

    CCSprite *updata = CCSprite::create("f1.png");
    updata->setFlipX(true);
    updata->setPosition( ccp(visibleSize.width / 2 - 50, visibleSize.height / 2 - 50) );
    this->addChild(updata,1,spr1_tag);

    CCSprite *updata2 = CCSprite::create("f2.png");
    updata2->setPosition( ccp(visibleSize.width / 2 + 50, visibleSize.height / 2 - 50) );
    updata2->runAction(CCRepeatForever::create(CCSequence::create(CCScaleTo::create(0.5, 1.3),CCRotateBy::create(2, 90),CCScaleTo::create(0.5, 1),NULL)));

    this->addChild(updata2,1,spr2_tag);

    this->setTouchEnabled(true);
    return true;
}

CCDrawNode* HelloWorld::shape(CCSize size)
{
    CCDrawNode *shape = CCDrawNode::create();
    static CCPoint shapedate[4];
    shapedate[0] = ccp(-(size.width / 2), -(size.height / 2));
    shapedate[1] = ccp((size.width / 2), -(size.height / 2));
    shapedate[2] = ccp((size.width / 2), (size.height / 2));
    shapedate[3] = ccp(-(size.width / 2), (size.height / 2));

    static ccColor4F yellow = {1, 1, 0, 1};
    shape->drawPolygon(shapedate, 4, yellow, 0, yellow);
    return shape;
}

void HelloWorld::setshaper(int tag){

    this->unschedule(schedule_selector(HelloWorld::cliperupdate));

    current_tag = tag;

    CCSprite* sp = (CCSprite*) this->getChildByTag(tag);
    CCClippingNode *clipper = (CCClippingNode*)this->getChildByTag(cliper_tag);

    CCSprite *stencil = CCSprite::createWithTexture(sp->getTexture());
    stencil->setFlipX(sp->isFlipX());
    stencil->setFlipY(sp->isFlipY());
    stencil->setScale(sp->getScale());
    stencil->setRotation(sp->getRotation());
    clipper->setStencil(stencil);
    clipper->setPosition(sp->getPosition());

    clipper->removeChildByTag(content_tag);
    clipper->addChild(shape(sp->getContentSize()),0,content_tag);

    this->schedule(schedule_selector(HelloWorld::cliperupdate), 0.05);

}

void HelloWorld::cliperupdate(float dt){

    CCSprite* sp = (CCSprite*) this->getChildByTag(current_tag);
    CCClippingNode *clipper = (CCClippingNode*)this->getChildByTag(cliper_tag);
    clipper->setPosition(sp->getPosition());

    CCSprite *stencil = (CCSprite*)clipper->getStencil();
    stencil->setFlipX(sp->isFlipX());
    stencil->setFlipY(sp->isFlipY());
    stencil->setScale(sp->getScale());
    stencil->setRotation(sp->getRotation());

    CCSprite *content = (CCSprite*)clipper->getChildByTag(content_tag);
    content->setScale(sp->getScale());
    content->setRotation(sp->getRotation());

}

bool HelloWorld::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent){

    CCPoint location = this->convertTouchToNodeSpace(pTouch);
    if (this->getChildByTag(spr1_tag)->boundingBox().containsPoint(location)) {
        setshaper(spr1_tag);
    }

    if (this->getChildByTag(spr2_tag)->boundingBox().containsPoint(location)) {
        setshaper(spr2_tag);
    }

    return true;

}
void HelloWorld::ccTouchMoved(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent){

}
void HelloWorld::ccTouchEnded(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent){

}

void HelloWorld::registerWithTouchDispatcher(void){
    CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 0, false);
}
void HelloWorld::onEnter(){
    CCLayer::onEnter();
}
void HelloWorld::onExit(){
    CCLayer::onExit();
}

void HelloWorld::menuCloseCallback(CCObject* pSender)
{
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT) || (CC_TARGET_PLATFORM == CC_PLATFORM_WP8)
	CCMessageBox("You pressed the close button. Windows Store Apps do not implement a close button.","Alert");
#else
    CCDirector::sharedDirector()->end();
#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
    exit(0);
#endif
#endif
}

demoproject在这里下载 狂点我

时间: 2024-08-11 05:44:19

cocos2d-x 2.2.0 图片选中聚焦 ,图片描边 CCClippingNode 实现的相关文章

图片选中出现边框效果

图片选中出现边框效果:当点击选中图片时,图片能够出现红色的边框效果.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="http://www.softwhy.com

【人脸识别0】视频分解图片与图片合成视频

一,引言 目标:这小节主要通过两个demo熟悉视频分解图片与图片合成视频的OpenCV的应用 环境:python3.6+OpenCV3.3.1 二,示例 Demo1:视频分解图片 目标: 1.指定文件夹中读取视频文件 2.将视频文件分解为图片 3.将图片保存在指定文件夹中 # -*-coding:utf-8-*- #author: lyp time: 2018/8/8 # 视频分解图片 import cv2 cap = cv2.VideoCapture('E:/Envs/opencvdemo/o

android拍照获得图片及获得图片后剪切设置到ImageView

ok,这次的项目需要用到设置头像功能,所以做了个总结,直接进入主题吧. 先说说怎么 使用android内置的相机拍照然后获取到这张照片吧 直接上代码: Intent intentFromCapture = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); Uri imageUri = Uri.fromFile(new File(Environment.getExternalStorageDirectory()+"/zxy/image/temp.png&qu

ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结

相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直接从应用程序访问,只能通过终端用户去选择和使用相册图片 应用程序包 应用程序包可能会将图像与可执行程序.Info.plist文件和其他资源一同存储.我们可以通过本地文件路径来读取这些基于包的图像并在应用程序中显示它们. 沙盒 借助沙盒,我们可以把图片存储到Documents.Library.tmp文

iOS获取相册/相机图片-------自定义获取图片小控件

一.功能简介 1.封装了一个按钮,点击按钮,会提示从何处获取图片:如果设备支持相机,可以从相机获取,同时还可以从手机相册获取图片. 2.选择图片后,有一个block回调,根据需求,将获得的图片拿来使用. 3.提供了初始化方法,可以灵活定义按钮,包括把返回的图片设置给按钮自己. 二.核心原理 1.UIAlertController 提示框 2.UIImagePickerController 图片拾取控制器 3.isSourceTypeAvailable:UIImagePickerControlle

spring mvc 图片上传,图片压缩、跨域解决、 按天生成目录 ,删除,限制为图片代码等相关配置

spring mvc 图片上传,跨域解决 按天生成目录 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ #fs.domains=182=http://172.16.100.182:18080,localhost=http://localhost:8080 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE be

img只显示图片一部分 或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置 部分代码:<style type="text/css">img {position:abs

CircleImageManager ——将图片转换为圆形图片的类

package com.kale.utils; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.PorterDuffXfermode; import android.g

.net 根据图片网络地址获取图片二进制字节数据流

/// <summary> ///根据html路径获取图片的字节 /// </summary> /// <param name="picSize">图片尺寸,原图:1,大图:2,中图:3,小图:4</param> /// <param name="serverPath">图片服务器地址</param> /// <returns></returns> public stat