I'm trying to create elipse with radial gradient fill, but flash makes it filled with solid color (the second one - 0xe9afaf)
var mat:Matrix = new Matrix();
mat.createGradientBox(150, 100, 0, 0, 0);
timeField = new Shape();
timeField.graphics.beginGradientFill(GradientType.RADIAL, [0xd35f57, 0xe9afaf], [1, 1], [0,255],mat);
timeField.graphics.lineStyle(3, 0x561717);
timeField.graphics.drawEllipse(GlobalVariables.globalStage.stageWidth / 2 - 75, -50, 150, 100);
timeField.graphics.endFill();
addChild(timeField);
I have no idea what's wrong.
The position of your matrix's gradient box and your ellipse are off center, so you're seeing the solid part of the gradient after all the color has faded out. You're going to have to offset your gradient box to match the position of the ellipse.
Line 2:
mat.createGradientBox(150, 100, 0, GlobalVariables.globalStage.stageWidth / 2 - 75, -50);
Or you can also make your ellipse at 0, 0 and move the timeField to the center where you want it.
timeField.graphics.drawEllipse(0, 0, 150, 100);
timeField.x = GlobalVariables.globalStage.stageWidth / 2 - 75;
timeField.y = -50;
Related
Is it possible to set value of alpha channel when providing fill and stroke colors in PDFlib?
$p->setlinewidth(20);
$p->setcolor('fill', 'rgb', 1, 0, 0, null);
$p->setcolor('stroke', 'rgb', 0, 1, 0, null);
$p->rect(0, 0, 100, 100);
$p->fill_stroke();
Is it possible to make rectangle's red fill and thick green border to be semi-transparent?
Is it possible to make rectangle's red fill and thick green border to be semi-transparent?
sure, please use GState for this task. You find a complete sample code within the PDFlib cookbook: Transparent Graphics
/* Save the current graphics state. The save/restore of the current
* state is not necessarily required, but it will help you get back to
* a graphics state without any transparency.
*/
$gstate = $p->create_gstate("opacityfill=.5 opacitystroke=.5");
$p->save();
$p->set_gstate($gstate);
$p->setlinewidth(20);
$p->setcolor('fill', 'rgb', 1, 0, 0, null);
$p->setcolor('stroke', 'rgb', 0, 1, 0, null);
$p->rect(0, 0, 100, 100);
$p->fill_stroke();
$p->restore();
For a powerful path generation, you might use the Path object. See PDFlib 9.2 Documentation as well the samples within PDFlib Cookbook - path objects.
page.drawText(WATERMARK.LABEL, {
x: 180,
y: 400,
size: 30,
font: helveticaFont,
color: rgb(220 / 255, 220 / 255, 220 / 255),
rotate: degrees(-315),
opacity: 0.6
})
// add opacity field only
Can I draw a rect which is transparent inside, but not the outline? It would be better if I could set the outline's width.
If you just want to draw the outline of a rect, you can pass an integer as the fourth (the width) argument to pygame.draw.rect:
pygame.draw.rect(screen, (0, 100, 255), (50, 50, 162, 100), 3) # width = 3
The problem with this approach is that the corners won't look sharp and clean and the outline can't be transparent.
You could also use the gfxdraw module to draw several outlines with a for loop:
def draw_rect_outline(surface, rect, color, width=1):
x, y, w, h = rect
width = max(width, 1) # Draw at least one rect.
width = min(min(width, w//2), h//2) # Don't overdraw.
# This draws several smaller outlines inside the first outline. Invert
# the direction if it should grow outwards.
for i in range(width):
pygame.gfxdraw.rectangle(screen, (x+i, y+i, w-i*2, h-i*2), color)
draw_rect_outline(screen, (250, 50, 162, 100), (0, 100, 255, 155), 9)
That also allows you to pass a color with an alpha channel to make the outline transparent.
It would also be possible to create a transparent surface and draw a rect onto it (you can pass a transparent color here as well):
surf = pygame.Surface((162, 100), pygame.SRCALPHA)
pygame.draw.rect(surf, (0, 100, 255, 155), (0, 0, 162, 100), 21)
If you want a filled, transparent rectangle, just fill the complete surface:
surf.fill((0, 100, 255, 155))
I am trying to create an overlay that can highlight certain portions of the page. The best way I've figured out to do this is to use a canvas fit to the page, draw the shapes I need, and draw a rectangle using this trick:
ctx.rect(canvas.width, 0, 0 - canvas.width, canvas.height);
I'm not sure I can explain this well, so it might be best to look at the jsFiddle example here to get an idea of what I am trying to do.
This works perfectly in every browser except Safari. Is there any way to achieve this effect in Safari?
You can try filling the whole canvas first, then use composite mode to knock out the shapes.
Example:
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(canvas.width, 0, 0 - canvas.width, canvas.height);
// next shape will punch hole in the draw rectangle above
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = "rgba(0, 0, 0, 1)"; // make sure alpha is 100%
ctx.beginPath();
ctx.moveTo(300, 60);
ctx.arc(300, 60, 50, 0, 2 * Math.PI);
ctx.moveTo(500, 160);
ctx.arc(500, 160, 50, 0, 2 * Math.PI);
drawEllipse(ctx, 103, 23, 100, 30)
drawEllipse(ctx, 503, 23, 100, 30)
ctx.fill();
ctx.globalCompositeOperation = 'source-over'; // reset comp. mode
Modifed fiddle here
Alpha (not the color) will determine how much visible the hole will be.
Hope this helps.
I have a B/W picture and I need to make some adjustments to it - I need to increase it's 'visibility' (it is too gray, I need to make it darker). Does anybody know how to reproduce Photoshop's brightness adjust in AS3? Please note that this is NOT the same as adjusting the brightness in Flash. The difference is:
in PS: brightness adjusts only the pixels that have a color different to white. It does not do anything to white pixels, so white pixels actually stay white
in PS: lightness adjusts all the pixels, so it affects the white pixels as well. Bringing lightness down makes all the image darker; this is unusable for me and this is exactly what Flash does as well (although it is called 'brightness' there)
I could reproduce Flash's brightness with this matrix:
var m:Array = new Array();
m = m.concat([1, 0, 0, 0, value]); // red
m = m.concat([0, 1, 0, 0, value]); // green
m = m.concat([0, 0, 1, 0, value]); // blue
m = m.concat([0, 0, 0, 1, 0]); // alpha
new ColorMatrixFilter(m);
...however this is exactly what doesn't work well as it sets all the image darker, including the white parts.
Any ideas how to reproduce PS's brigthness setting? Or any other matrix that actually keeps white/light pixels light while darkening the darker ones? Thank you!
I doubt this replicates Photoshop's "brightness" exactly (it's more like adjusting the contrast), but you could try scaling the RGB values, then adjusting them so that whites remain white:
var scaling:Number = 4;
var adjustment:Number = 255 * (1 - scaling);
var m:Array = new Array();
m = m.concat([scaling, 0, 0, 0, adjustment]); // red
m = m.concat([0, scaling, 0, 0, adjustment]); // green
m = m.concat([0, 0, scaling, 0, adjustment]); // blue
m = m.concat([0, 0, 0, 1, 0]); // alpha
new ColorMatrixFilter(m);
If you wanted a more traditional contrast, the adjustment would be:
var value:Number = 255 * (1 - scaling) * 0.5;
I need to shade an OUTSIDE area, ie the shapes I draw in the shader are drawn normally, and their inverse is then shaded. Its easiest to explain with an example, and noting the bit that is not working:
// canvasBackground is the actual background
// canvasBackgroundContext is its context
// To make it simple, I will fill it with green
canvasBackgroundContext.fillStyle = "#00FF00";
canvasBackgroundContext.clearRect(0, 0, canvasBackground.width, canvasBackground.height);
// I also have a the shader
// canvasShader and canvasShaderContext with same width and height as canvasBackground
canvasShaderContext.fillStyle = "rgba(0, 0, 0, 0.25)"; // Black but slightly transparent
canvasShaderContext.clearRect(0, 0, canvasShader.width, canvasShader.height);
// Everything so far is great - now the problem
// This is wrong, because when I create the area I want to create clear, it does not work
// because when you draw a shape it does not work like clearRect, as it does not set each pixel to a clear pixel
canvasShaderContext.fillStyle = "rgba(0, 0, 0, 0.0)";
// Create the only non shaded bits in the shader, overlapping rects
canvasShaderContext.fillRect(10, 10, 50, 50);
canvasShaderContext.fillRect(40, 40, 50, 50);
// So when I do this, it should shade the entire background except for the two 50x50 overlapping rects at 10,10 and 40,40
canvasBackgroundContext.drawImage(canvasShaderContext, 0, 0);
I don't want to go to a pixel by pixel basis using getImageData, as that is slow. There must be some way of doing this.
I am not sure I fully understand what you try to achieve, but how about adding a composite mode to this:
canvasShaderContext.fillRect(10, 10, 50, 50);
canvasShaderContext.fillRect(40, 40, 50, 50);
which results in:
/// store old mode whatever that is
var oldMode = canvasShaderContext.globalCompositeOperation;
/// this uses any shape that is drawn next to punch a hole
/// in destination (current context).
canvasShaderContext.globalCompositeOperation = 'destination-out';
/// now draw the holes
canvasShaderContext.fillRect(10, 10, 50, 50);
canvasShaderContext.fillRect(40, 40, 50, 50);
/// set back to old mode
canvasShaderContext.globalCompositeOperation = oldMode;
That will also clear the alpha bits.