插件代码

贯彻原理:实际上正是先选取渲染队列渲染,然后再利用ZTest,改变渲染的遮光关系。

新建HJHoledView类,代码如下:

复制代码 代码如下:

PS:Depth Testing:深度测量试验,也叫深度缓冲。只有最接近观看者的实体会被绘制。深度即Z,该值越小表示离观察者越近,该值越大表示离阅览者越远。

/*

/*

name: UserGuider
authors:

  • Garland Yang
    requires: [Core/Class, Core/Element.Style, Core/Element.Event,
    Core/Element.Dimensions]
    version:
  • 1.0
    【yzc88网页版登录】NGUI利用深度测试实现新手引导遮罩,基于mootools插件实现遮罩层新手引导。…
    */
    var UserGuider = new Class({
    Implements: [Options, Events],
    options: {
    UserGuideList: new Array(),
    step: 0
    },
    initialize: function (options) {
    this.setOptions(options);
    this.step = this.options.step;
    },
    createGuide: function () {
    var self = this;
    $$(‘.userGuide’).dispose();
    var UserGuideList = this.options.UserGuideList;
    var config = UserGuideList[this.step];
    if (config == null) {
    return;
    }
    var ele = $$(‘.’ + config.className)[0];
    if (ele == null) {
    return;
    }
    $$(‘.’ + config.className + ‘ a’).set(‘target’, ‘_blank’);
    var top = ele.getCoordinates().top;
    var right = ele.getCoordinates().right;
    var bottom = ele.getCoordinates().bottom;
    var left = ele.getCoordinates().left;
    var width = ele.getCoordinates().width;
    var height = ele.getCoordinates().height;
    var x = window.getScrollSize().x;
    var y = window.getScrollSize().y;
    this.createShadowDiv(‘shadowTop’, left, 0, width, top);
    this.createShadowDiv(‘shadowRight’, right, 0, x – right, y);
    this.createShadowDiv(‘shadowButtom’, left, bottom, width, y – bottom);
    this.createShadowDiv(‘shadowLeft’, 0, 0, left, y);
    if (config.src != null) {
    this.createUserGuideImg(left + config.imgLeft, top + config.imgTop,
    config.src);
    }
    if (config.navUrl != null) {
    this.createUserGuideNavImg(right – 50, bottom, config.navUrl);
    }
    if (this.step > 0) {
    this.createUserButton(‘userguide_undo’, ‘UserGuide/undo.png’, this.step
  • 1);
    }
    if (this.step < UserGuideList.length – 1) {
    this.createUserButton(‘userguide_next’, ‘UserGuide/next.png’, this.step
  • 1);
    }
    this.createUserButton(‘userguide_finish’, ‘UserGuide/finish.png’,
    10000);
    this.changeUserGuideButton();
    if (config.src2 != null) {
    this.createUserGuideImg(left + config.imgLeft2, top + config.imgTop2,
    config.src2);
    }
    return this;
    },
    createShadowDiv: function (id, left, top, width, height) {
    var self = this;
    var div = new Element(‘div’);
    div.set(‘id’, id);
    div.addClass(‘userGuide’);
    div.setStyles({
    left: left + ‘px’,
    top: top + ‘px’,
    width: width + ‘px’,
    height: height + ‘px’,
    position: ‘absolute’,
    ‘background-color’: ‘#000’,
    ‘z-index’: 100,
    opacity: 0.5,
    filter: ‘alpha(opacity=50)’
    });
    $$(‘body’).adopt(div);
    return this;
    },
    createUserGuideNavImg: function (left, top, nav) {
    var self = this;
    var img = new Element(‘img’);
    img.addClass(‘userGuideNav’);
    img.addClass(‘userGuide’);
    img.setStyles({
    cursor: ‘pointer’,
    ‘z-index’: 10000,
    left: left + ‘px’,
    top: top + ‘px’,
    position: ‘absolute’
    });
    img.set(‘src’, ‘userguide/nav.png’);
    img.addEvent(‘click’, function () {
    window.open(nav);
    });
    $$(‘body’).adopt(img);
    return this;
    },
    createUserGuideImg: function (left, top, src) {
    var self = this;
    var img = new Element(‘img’);
    img.addClass(‘userGuideImg’);
    img.addClass(‘userGuide’);
    img.setStyles({
    ‘z-index’: 1000,
    left: left + ‘px’,
    top: top + ‘px’,
    position: ‘absolute’
    });
    img.set(‘src’, src);
    $$(‘body’).adopt(img);
    return this;
    },
    createUserButton: function (className, src, thisStep) {
    var self = this;
    var img = new Element(‘img’);
    img.addClass(className);
    img.addClass(‘userGuide’);
    img.setStyles({
    cursor: ‘pointer’,
    ‘z-index’: 1000000,
    position: ‘absolute’
    });
    img.set(‘src’, src);
    img.addEvent(‘click’, function () {
    self.step = thisStep;
    self.createGuide();
    });
    $$(‘body’).adopt(img);
    return this;
    },
    changeUserGuideButton: function () {
    var self = this;
    var size = window.getSize();
    var scroll = window.getScroll();
    var scrollSize = window.getScrollSize();
    $$(‘.userguide_finish’).setStyles({
    left: (size.x – 220) + ‘px’,
    top: (size.y + scroll.y – 80) + ‘px’
    });
    $$(‘.userguide_next’).setStyles({
    left: (size.x – 420) + ‘px’,
    top: (size.y + scroll.y – 80) + ‘px’
    });
    $$(‘.userguide_undo’).setStyles({
    left: (size.x – 620) + ‘px’,
    top: (size.y + scroll.y – 80) + ‘px’
    });
    return this;
    }
    });

调用形式

复制代码 代码如下:

var UserGuider;
var UserGuideList = new Array({
className: ‘step0’,
src: ‘UserGuide/step0.png’,
imgTop: 50,
imgLeft: 50
}, {
className: ‘step1’,
src: ‘UserGuide/step1.png’,
imgTop: -150,
imgLeft: 0,
src2: ‘UserGuide/pic/1.gif’,
imgTop2: 210,
imgLeft2: 450
}, {
className: ‘step2’,
src: ‘UserGuide/step2.png’,
imgTop: 0,
imgLeft: -600,
navUrl: ‘/MyMessageCenter.aspx’,
src2: ‘UserGuide/pic/2.gif’,
imgTop2: 110,
imgLeft2: 80
}, {
className: ‘step3’,
src: ‘UserGuide/step3.png’,
imgTop: -150,
imgLeft: 130,
navUrl: ‘/MyTaskSearch.aspx’,
src2: ‘UserGuide/pic/3.png’,
imgTop2: -120,
imgLeft2: 250
});
window.addEvent(‘domready’,function(){
UserGuider = new UserGuider({
UserGuideList: UserGuideList
})
UserGuider.createGuide();
});

具体操作步骤:

绘制遮罩能够画(圆形,矩形,圆角矩形,自定义视图)

你或然感兴趣的作品:

  • jquery
    插件落成图片延迟加载效果代码
  • js loading加载效果完成代码
  • js调控的遮罩层实例介绍
  • jquery下达成overlay遮罩层代码
  • JS遮罩层效果 包容ie firefox
    jQuery遮罩层
  • JQuery
    遮罩层完毕(mask)达成代码
  • Javascript
    遮罩层和加载效果代码

1、修改NGUI的Unlit – Transparent Colored Shader,将ZWrite改为On。

增加箭头和提醒文字

2、创设3个Panel,分别为叫GameObject、Mask、Cutout,里面分别创造叁个Pepsi-Cola,

案例:

3、将Panel的渲染格局改为Explicit,渲染队列分别改为3000(GameObject)、3002(Mask)、3001(Cutout),这一步会是渲染根据GameObject->Cutout->Mask的一一渲染。

//增多遮罩提示

4、调度他们的Z轴:GameObject为300,Mask为200,Cutout为100。这一步会使渲染的屏蔽关系发出更动,会使Cutout挡住Mask。大家再把Mask上边包车型地铁Coca Cola发光度调为1。最终神奇的职业出现了!

self.holedView = [[HJHoledView alloc]initWithFrame:self.view.frame];

yzc88网页版登录 1

[self.holedView setDimingColor: [[UIColor redColor]
colorWithAlphaComponent:0.75f]];

//self.holedView.holeViewDelegate = self;

[self.view addSubview:_holedView];

//开关-圆角矩形

[self.holedView addHoleRoundedRectOnRect:_myButton.frame
withCornerRadius:_myButton.frame.size.width/2];

[self.holedView addFocusView:_myButton];

//圆形

[self.holedView addHoleCircleCenteredOnPosition:CGPointMake(190, 110)
andDiameter:130];

[self.holedView addHoleCircleCenteredOnPosition:CGPointMake(190, 310)
andDiameter:130];

//文字表达

//[self.holedView addHCustomView:[self viewForDemo]
onRect:CGRectMake(20.0f, 250.0f, 200.0f, 50.0f)];

[self.holedView addPromptLabelText:@”哈哈哈哈哈哈哈哈”
onRect:CGRectMake(20.0f, 150.0f, 200.0f, 50.0f)];

[self.holedView addPromptLabelText:@”嘻嘻嘻嘻嘻嘻嘻”
onRect:CGRectMake(20.0f, 200.0f, 200.0f, 50.0f)];

//增加箭头

[self.holedView addArrowView:CGPointMake(100, 150)
endPoint:CGPointMake(150, 100)];

[self.holedView addArrowView:CGPointMake(100, 250)
endPoint:CGPointMake(150, 300)];

2016年3月1号jing

*/

#import

#import”RTLabel.h”

typedefNS_ENUM(NSInteger, HJHoleType)

{

HJHoleTypeCirle,

HJHoleTypeRect,

HJHoleTypeRoundedRect,

HJHoleTypeCustomRect

};

@classHJHoledView;

@protocolHJHoledViewDelegate

@optional

-(void)animationViewRemove:(HJHoledView*)_animationView;

-(void)animationDidOver:(HJHoledView*)_animationView;

-(void)exitButtonAction:(HJHoledView*)_animationView;

@end

@interfaceHJHoledView :UIView{

__weakid_delegate;

}

@property(weak)id delegate;

@property(strong,nonatomic)UIColor*dimingColor;//颜色私下认可深湖蓝半晶莹剔透

– (NSInteger)addHoleCircleCenteredOnPosition:(CGPoint)centerPoint
andDiameter:(CGFloat)diamter;

– (NSInteger)addHoleRectOnRect:(CGRect)rect;

– (NSInteger)addHoleRoundedRectOnRect:(CGRect)rect
withCornerRadius:(CGFloat)cornerRadius;

– (NSInteger)addHCustomView:(UIView*)customView
onRect:(CGRect)rect;//自定义视图

– (UILabel*)addPromptLabelText:(NSString*)_textStr
onRect:(CGRect)rect;//提醒文字重返UILabel方便修改字体大小颜色等

-(void)addArrowView:(CGPoint)_startP
endPoint:(CGPoint)_endP;//加多箭头

-(void)addImgArrowView:(CGPoint)_point
rotation:(UIImageOrientation)_orientation;//增添图片箭头

– (void)addFocusView:(UIView*)focus;//增多集中按键之类的

– (void)removeHoles:(BOOL)_isAnimation;

-(void)addExitBtn;//暗中认可地点右上角

-(void)addExitBtn:(CGRect)rect;

@end

//

//HJHoledView.h

//HoledViewTest

//

//Created by hsmob on 16/2/29.

//Copyright © 2016年WeiMob. All rights reserved.

//

#import”HJHoledView.h”

#import”HJArrowView.h”

#pragma mark – holes objects

@interfaceHJHole :NSObject

@property(assign)HJHoleTypeholeType;

@end

@implementationHJHole

@end

@interfaceHJCircleHole :HJHole

@property(assign)CGPointholeCenterPoint;

@property(assign)CGFloatholeDiameter;

@end

@implementationHJCircleHole

@end

@interfaceHJRectHole :HJHole

@property(assign)CGRectholeRect;

@end

@implementationHJRectHole

@end

@interfaceHJRoundedRectHole :HJRectHole

@property(assign)CGFloatholeCornerRadius;

@end

@implementationHJRoundedRectHole

@end

@interfaceHJCustomRectHole :HJRectHole

@property(strong)UIView*customView;

@end

@implementationHJCustomRectHole

@end

@interfaceHJHoledView()

@property(strong,nonatomic)NSMutableArray*holes;//高亮区域数组

@property(strong,nonatomic)NSMutableArray*focusView;//点击区域数组

@end

@implementationHJHoledView

#pragma mark – LifeCycle

– (void)awakeFromNib

{

[superawakeFromNib];

[selfsetup];

}

– (instancetype)initWithCoder:(NSCoder*)aDecoder

{

self= [superinitWithCoder:aDecoder];

if(self) {

[selfsetup];

}

returnself;

}

– (instancetype)initWithFrame:(CGRect)frame

{

self= [superinitWithFrame:frame];

if(self) {

[selfsetup];

[selfshowAnimation];

}

returnself;

}

– (void)setup

{

_holes= [NSMutableArraynew];

_focusView= [NSMutableArraynew];

self.backgroundColor= [UIColorclearColor];

_dimingColor= [[UIColorblackColor]colorWithAlphaComponent:0.75f];

}

-(void)addExitBtn{

floatwidth=40;

floatx=ScreenWidth-width-20;

网站地图xml地图