We have a guy whose shooting range is denoted by a transparent circle. We want to have overlay affect in that transparent layer, as it works in Photoshop.
Basically that will highlight all the elements which comes in that range.
How can we do the same effect in cocos2d.
I don't know if it'll look exactly like you expect, but I'd do something like this:
For circle:
auto drawNode = DrawNode::create();
drawNode->drawDot(myPosition, myRadius, Color4F(0, 0, 0, 0.3));
//or use drawSolidCircle
now just add it wherever you want.
For "highlighting":
//loop through each all elements in range
element->setColor(someColor);
//or use shader, examples in cocos2d-x tests
Related
I just started working on as3. I want to create a Rectangle but without color fill, so I can see what is behind it on stage. I love to draw on that Rectangle, but it never works without color fill.
var Canvas_sp:Sprite = new Sprite();
this.addChild(Canvas_sp);
//here i love Rectangle be without collor fill not whit(FFFFFF)e color
//i love see what behind the Rectangle and draw over it
Canvas_sp.graphics.beginFill(0xFFFFFF);
Canvas_sp.graphics.drawRect(0,0,550,400);
thx for all
If you don't want a fill, don't begin one.
Omit this line:
Canvas_sp.graphics.beginFill(0xFFFFFF);
To achieve the goal you want, you need to set the alpha parameter to 0, and maybe, to draw just a border of a Rectangle. You can see an example here: example
In your case, you can try something like this:
Canvas_sp.graphics.beginFill(0xffffff, 0);
Canvas_sp.graphics.lineStyle(0x000000, 0.1);
Canvas_sp.graphics.drawRect(0, 0, 550, 400);
Canvas_sp.graphics.endFill();
Is it possible to only trigger a div's mouseover when the cursor is over an opaque part of the div's background image? Perhaps via Javascript?
All I can find with Google are old IE PNG fixes.
This looks like a similar question to this one: Hit detection on non-transparent pixel
I suppose this could also be done for background image by getting the attribute with jQuery:
$('#myDiv').css('background-image');
I haven't personally done this, but it seems like a viable solution. This will only work for modern browsers, but you should be able to make it back-compatible with excanvas.
It is possible, just not very easily. You'll have to use a lot of Javascript.
You'd want to attach to your <div>'s onmousemove event, which returns the X,Y coordinates of the cursor. Your event handler function would then test to see if the cursor is in the correct place in order to trigger an alternative onmouseover event.
Implementing the "is the cursor over an opaque pixel or not?" test can be done two ways: the first is to create a simple mathematical expression (say if the opaque parts of the image make neat rectangles, circles or polygons). The more difficult (and less browser-supported) way is to load the background image into a Canvas object and then get the current pixel value's opacity figure and take it from there, like so:
var pixel = canvas.getImageData(x, y, 1, 1).data;
var alpha = pixel[3]; // assuming RGBA
if( alpha > threshold ) onMouseOver(); // raise the event
Another alternative is to create an entirely transparent div (or some other element) positioned and sized so that it only covers the opaque part of the div below, then just test the mouseover of that element's box.
It's a bit of tweaking but why don't you add a class to your opaque div, and use JavaScript to check for it?
In jQuery:
$('div').mouseover(function(){
if ($(this).is('.opaque')) {
//Some actions
}
});
I'm playing with Open Flash Chart. Take a look at this chart:
http://teethgrinder.co.uk/open-flash-chart-2/line-solid-dot.php
As you can see, the rounded dot points look ugly. Some of them are more rounded, some of them less, they don't look the same, as they should. I don't know AS3 and have no idea what is the case. I checked the source code:
this.graphics.lineStyle( 0, 0, 0 );
this.graphics.beginFill( colour, 1 );
this.graphics.drawCircle( 0, 0, style.get('dot-size') );
this.graphics.endFill();
I tried to change the size or draw rectangles instead, but they still don't look the same. I guess the problem is somewhere else...
EDIT: I also noticed, that other elements also looks a little bit different (and they shouldn't) - for example axis ticks. My guess is that it is the quality problem. But when I right-click on the flash object, there is an option "quality" and the "high" is set (there is also a "medium" and a "low" to choose). Can I increase the quality level somewhere else?
From hollow dots, I came to realize there is something around each dot which separated each dot from the connecting lines & also produced blurry hollow dots.
Setting the attribute "halo_size" to 0 helped in this case.
I noticed the same gap in your sold dots examples as well. Maybe that's the problem.
To set stage quality, simply use:
stage.quality = "low";
stage.quality = "medium";
stage.quality = "high";
You may set it in the main class itself which happens to be the document class for this project.
I noticed that if the chart size is 400 x 400 these inconsistencies cease to exist. So the problem we see is a scaling problem & not at the place we think.
Besides, Setting line style allows a proper border around the circle. This will at least appear better.
this.graphics.lineStyle(1, colour, 1);
this.graphics.beginFill( colour, 1 );
this.graphics.drawCircle( 0, 0, style.get('dot-size') );
this.graphics.endFill();
I have a BitmapData object named myBitmapData. It was loaded of PNG of size 104x104. This PNG represents a red circle on the transparent background.
There is also a Sprite object named myBackground. I want render that red circle into myBackground.
myBackground.graphics.beginBitmapFill(myBitmapData);
myBackground.graphics.drawRect(0, 0, myBitmapData.width, myBitmapData.height);
myBackground.graphics.endFill();
addChild(myBackground);
Everything is fine. I see a red circle in the left top of myBackground.
But when I change the third line to
myBackground.graphics.drawRect(0, 52, myBitmapData.width, myBitmapData.height);
and expect my circle to be translated 52 pixels down, I actually obtain something strange (for me :)): there are two red half-circles (they form like hourglass).
So, the question is: how do I render myBitmapData into the random position of myBackground?
P.S.
In the case of
myBackground.graphics.drawRect(0, 104, myBitmapData.width, myBitmapData.height);
it is circle again :)
This is caused by beginBitmapFill's default repeat = true parameter. There's an example in the docs. Disabling the repetition won't work though, you'd just get a half circle then.
There are several ways to fix this:
Use a Matrix with a translation (displacement) as argument in beginBitmapFill.
Draw the rectangle at 0,0 on another Sprite, and move that sprite to where you want it on the background.
Don't draw directly to the background, but to another bitmap using copyPixels. Then fill the background with that bitmap.
When drawing lines with the HTML5 canvas element, is it possible to define the stroke style of the lines? Basically in Photoshop and other similar programs, you can define a stroke style for lines that looks like it is "hand drawn". Is is possible to do anything like that in HTML5 canvas or am I shooting for the moon here?
Thanks
-Jesse
It is possible but not by default. See ShadowCloud's post for what you can do by default (very little).
Depending on what you want, it shouldn't be too hard.
If by "hand drawn" you mean you want jitter, you'd have to break up every drawn line/curve into smaller parts and add some noise to each of the points.
If you want a brush you'd have to break up every drawn line/curve into smaller parts and call drawImage every few pixels to emulate a photoshop brush.
Almost all of them rely on breaking up your lines and curves into smaller bits, so you should figure that out foremost.
If you decide to implement these and are having trouble breaking up bezier curves and want help, let me know and I'll give you my code for that.
There is no standard API in HTML5 Canvas to manage such thing.
You can just set the color or the width of the stroke, for example:
context.strokeStyle = '#f00'; // red color
context.lineWidth = 4; // 4px wide
// Draw some rectangles.
context.fillRect (0, 0, 100, 100);
context.strokeRect(0, 0, 100, 100);
You can try to get more control using a library (Processing.js or Fabric.js)