So I'm trying to program a calculator in Electron and was pretty happy as I saw, I can do transparent windows and so do rounded corners like you see here:
https://drive.google.com/open?id=1_aVnucrbQS20RWgiRtjZYAOhUPrkwpT3
but as soon as I focus some other window the upper "rounded" corner turn to this:
https://drive.google.com/open?id=1u4LWUL-kdZMzAGclwpwJ3l5mP0ts8uYm
IMPORTANT: No the yellow on the pics is not gonna stay :P
Already thanking,
Elias
Related
I have a view (a Button in this case) and the content behind/below it can move around (a ScrollView). The button is just plain white with black text and not bordered with anything. When the content behind the View is white it does not really stand out as I would like it to do. (I can fix this with a black border sure... but...)
I have this idea of having a border around the button that is the opposite color of the view (pixel) behind it. So the border would always contrast with the background and constantly change with the content behind it.
I have googled a bit and looked into visual effects layers and some more complicated (over the top of my head) graphics stuff I don't remember the terminology for.
If you have an idea of how to approach this please tell me. I just really want to see what it would look like.
and have a wonderful day!
I don't think you can create a border that uses colors based on the color of the pixel from the layer behind the current layer using CALayer and borders.
What I would suggest doing is to add a second CALayer to your view's CALayer, inset by -1 in both dimensions (made 1 pixel bigger.) Let's call that the surroundLayer. Then make the surroundLayer's borderColor be white and the view's layer.borderColor be black (or visa-versa.) You can make the surroundLayer's borderColor be 50% opaque so it just lightens/darkens the pixels under it without completely obscuring them, and that is enough to increase the contrast and make your view's border show up regardless of the contents under it.
I've used this technique before and it works well.
Edit:
Check out the project https://github.com/DuncanMC/MaskableImageView.git. The project demonstrates using an image as a mask layer to hide/reveal the contents of a view.
The class MaskableView in that project draws a circular "cursor" that shows where it is revealing/masking the contents of its subview (an image and a label, in the example app.) The cursor is yellow in the middle, with a partly transparent black outer circle around it. This gives good contrast regardless of the colors in the part of the image it is being drawn over.
The MaskableView class has properties that let the caller set the colors use for the "cursor" circle.
Below I posted a short animation of what the eraser tool with a yellow inner circle and an outer, 1/2 transparent black circle looks like.
Without the outer dark circle the yellow inner circle tends to get lost in brighter parts of an image. With the combination of a bright colored inner circle and a partly transparent, dark outer circle, it's easy to see on ANY background:
I have 2 UIImage's one on top of another and the top one slides and reveals the coloured one. The issue is that I want the indicator (purple line, which is a view) to indicate in the left side only by the end of the image (image`s background is clear).
What I want is to resize that purple line so it wold be visible in the left side and on the image but not on the right side, as it is now.
Any ideas of what I can try ? I have no idea where to start, thank you!
What I did so far:
what I want:
It is possible to implement programmatically using CGImageCreateWithMask, but it is very hard. Also such solution will be not very fast, if you want to do it in real time.
I offer next solution: create 3-d image, as shown below. That picture must be a white mask, which will limit your line. Place that picture above pic 1 and 2. Pink line should also be placed below that picture.
Sorry, if I wrote something unclear.
Thanks kelin, the idea that you gave me was interesting, but I did not had time for that, so I found another way of doing this. I used a third image for the mask witch is an image with the lady`s shape cut off and a white background but only in the right side of the picture (the left half side image and lady shape is transparent), and the line crosses on top of the pictures shown previously and under the image I added with mask...
Simple and efficient, and it uses way less memory for a real time displaying with an animation .
I have a few .png images that I've worked on and brought into SpriteKit and they originally had a "white background" that I've erased. The white background erased fine but the rest of the image is also made "slightly transparent" so that you can see other sprites that are behind it. Im not sure the reasoning for this but I only want the "white background" to be removed while leaving the rest of the picture 100% visible.
The steps I took to get the images are
I drew them in "Microsoft Paint"
Then I put them on a flash drive and bring them to my Mac
I open them in "Preview" and manually erase any area I don't want to be visible.
Then Drag them into SpriteKit
The result is that the area that I erased is now gone, but the rest of the image is somewhat see-through as well, and it should not be.
Any help is Appreciated!
In SpriteKit I've set the SKNode alpha to 1, but this doesn't seem to help at all.
Here Is A Picture Of The Problem - you can see the nodes behind the fish.
This is sort of a photoshop question, I suppose, but does anybody know how to make a nice looking heart that's recessed? Sort of like this one, except recessed:
There are a few layer styles which can compliment each other to give you that recessed look.
A light drop shadow beneath the sprite (1px white shadow directly below usually does the trick, but you can experiment with its softness/size)
A gradient which is darker at the top and lighter near the bottom
A dark inner shadow which is at the top of the sprite. (1px black, for example)
If you're doing this in Photoshop, make sure to have the light angle set to 90ยบ
A basic letterpress effect can be achieved by having a white (or light coloured) drop shadow 1 point below the image. This is what is used in iOS for the status bar images and text, for example.
You may also want an inner shadow inside the top edge, and possibly a subtle gradient (lighterdarker at the top - note I have changed my mind on the gradient, but not updated the image!) instead of a solid background colour.
Here's a 5 minute bodge job done in Pixelmator. The inner shadow at the top is particularly amateurish, but I prefer drawing things like this in code!
I'm trying to create a EditText box, like below which has a image on the left hand side and editable text region on the right hand side, but I don't seem to have the slightest clue how to do this in android :| I can find various solutions for putting an image in the background (so the text can overwrite it) and also how to make the rounded corners, but I cannot find a way to put the image on the left and the text on the right.
Any pointers would be very much appreciated!
Make a background graphic including the image and the border with the rounded corners. Make an EditText with this graphic as background and adjust the EditText with the android:paddingLeft/Top/Right/Bottom properties.
After much researching the best way that I could find was to make use of drawable left right top and bottom, along with a drawable padding. This would mean that the button scales easily. #CodeDownZero 's suggestion is also valid. I think its a matter of personal preference in this case.