Limiting the CCLayer size is possible? - cocos2d-iphone

How can one limit the CCScrolLayer/CCLayer to a rect smaller than the screen size ? means:
CCLayer *page1;
When putting many pages in scroller, need all the items in the page to "disappear" when they reached some rect ( the scroller is above a "note page" boundaries hence cant get "out" of it)
Using the CCScrollLayer class extention
scroller = [[CCScrollLayer alloc] initWithLayers:[NSArray arrayWithObjects:pagesArray[0],pagesArray[1],pagesArray[2], nil] widthOffset:240];
scroller.showPagesIndicator=0;
scroller.pagesIndicatorNormalColor=ccc4(0, 0, 0, 20);
scroller.pagesIndicatorPosition=ccp(winSize.width/2,winSize.height*0.17);
scroller.pagesIndicatorSelectedColor=ccc4(239, 58, 104, 255);
[scroller setDelegate:self];
Thank you very much .

What you need is a clipping node. Please have a look at this tutorial.

Related

Cocos2d-x V3. How to determine admob banner height for different screen sizes?

The rectangle is positioned at y=102.
auto spr = Sprite::create("images/interface/wideBtnBlack.png");
Vec2 origin = Director::getInstance()->getVisibleOrigin();
spr->setColor(Color3B::GREEN);
spr->setPosition(Vec2(origin.x + 200, origin.y + 102));
spr->setAnchorPoint(Vec2::ZERO);
How can I make sure that the rectangle is placed right above the banner for all devices?
You can set Banner Size According to Device. and then By Doing Simple Math You can Achieve what you are Trying to Get. or Use Admob Delegate Method to Get Banner Height.
Banner.Height + (Object.Height/2) = Position Exactly Above Banner.

How to make 2 figures overlap in raphael.js

I'm completely new at raphael and never have been especially good working with canvas elements. I found a useful piechart but need to tweak it a little more to fit my needs.
This is what I have now : http://jsfiddle.net/El4a/sbxjfafx/4/
And this is the figure I want to achieve
The white circle I'm trying to draw on top of the piechart, appears underneath it instead. I honestly have no idea how to fix this, although I'm sure the solution won't be that difficult.
I can achieve this figure using manual positioning (which is a crappy way) with the following code:
var paper = Raphael(10, 50, 500, 500);
var circle = paper.circle(280, 180, 175);
circle.attr("fill", "white");
circle.attr("stroke", "#fff");
But obviously this won't scale with the piechart, and is easily ruined by inconvenient things like changing the window size.
I have tried putting that code inside a function and create it the same way the piechart gets created.
Raphael.fn.circle = function(cx, cy, r){
var paper = this,
rad = Math.PI / 180,
chart = this.set();
var circle = paper.circle(280, 180, 175);
circle.attr("fill", "white");
circle.attr("stroke", "#fff");
return chart;
};
raphael("circle", 700, 700).circle(350, 350, 175, values, labels, "#fff");
But that leaves me with the result you can see in the fiddle.
Hope anyone can help!
Thanks in advance.
Make sure you don't create the canvas twice. So create it once, and then use that reference to create the new elements.
Also place the circle after the coloured one, so that it appears in front. This is all about the order of elements in the DOM.
eg jsfiddle
Relevant amended code.
var r = raphael("holder", 700, 700);
r.pieChart(350, 350, 200, values, labels, "#fff");
r.circle(350, 350, 175).attr({ fill: 'white' });

QSpacerItem changeSize attracts bug

I'm creating a calendar app and just finished the appointment view and edit. Basicly it's a QVBoxLayout with the viewlayout and editlayout in it and I hide and show either the view or edit using signals.
That works just fine, there is 1 issue: in the viewlayout I have a QSpacerItem for some extra spacing and in order to remove the space when viewing the edit-part I change its size.
Like so
if( show_view_hide_edit )
spacer->changeSize(1, 60, QSizePolicy::Expanding, QSizePolicy::Fixed );
else
spacer->changeSize(0, 0, QSizePolicy::Fixed, QSizePolicy::Fixed );
This code works when the widget shows, and when I swap it to "edit". When I switch it back to view and then go back to edit the spacing is at the top of my screen. It shouldnt really be there. Image shows what happens. (link to image for size)
Without the construction code of your widget it is a little hard to guess, what is going on. Have you tried to insert / remove the SpacerItems with QBoxLayout::insertSpacing ( int index, int size ) and QLayout::removeItem ( QLayoutItem * item )?
And did you call QLayout::invalidate () after changing the size?

Flex Mobile List: How to get rid of grey overlay on renderer tap?

I tried setting all possible styles to something other than grey, just to try and get rid of the grey overlay as shown in the "Hello item 1" in the attached image of a list. Nothing worked. I examined the ListSkin class too and didn't fins anything that would draw these. How to get rid of these overlays?
<s:List id="list" width="100%" height="100%"
dataProvider="{dp}"
focusAlpha="0"
contentBackgroundAlpha="0"
contentBackgroundColor="0xFFFFFF"
selectionColor="0xFFFFFF"
downColor="0xFFFFFF"
borderVisible="false"
>
</s:List>
I just helped a client with this same thing. You, basically, have to extend the LabelItemRemderer class to not draw the rectangle. It is not exposed via styles or colors for you to change.
Look at this code (Starting at line 853 in the LabelItemRemderer):
// Selected and down states have a gradient overlay as well
// as different separators colors/alphas
if (selected || down)
{
var colors:Array = [0x000000, 0x000000 ];
var alphas:Array = [.2, .1];
var ratios:Array = [0, 255];
var matrix:Matrix = new Matrix();
// gradient overlay
matrix.createGradientBox(unscaledWidth, unscaledHeight, Math.PI / 2, 0, 0 );
graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
You basically need some way to force this code to not run. You can do this by creating your own itemRenderer from scratch. Or you can extend the LabelItemRenderer, override the drawBackground() method and copy all the parent drawBackground() code into your extended child; minus the block above.
I'd love to see the color exposed as a style or something. I'd love to see a magic property (or style) we could use to make the overlay vanish altogether. Feel free to log this as a bug into the Apache Flex Jira.

How do I draw a fine line like TreeView

I would like to be able to draw a file line using native Windows API (LineTo) like the one that TreeView uses to connect nodes to each other. But using RS_DOT to create the brush (::CreatePen(PS_DOT, 0, RGB(200, 200, 200))), produces a different kind of line. Does anyone know how I can draw such a line?
Creating a true dotted pen
LOGBRUSH LogBrush;
LogBrush.lbColor = c_colorGridLine;
LogBrush.lbStyle = PS_SOLID;
penDotted.CreatePen( PS_COSMETIC | PS_ALTERNATE , 1, &LogBrush, 0, NULL );