I am finishing up my asp core 3 project and fixing some warning that occurred,but i cannot find the reason for this one?the css property works completely fine adding some transparency to the black border.What causes the warning?
PS:My IDE is Visual Studio 2019
RGBa (Red = 0, Green = 0, Blue = 0, Alpha = 0.4)
it's different from rgb(0, 0, 0)
for border short hand:
border: 1px solid rgba(0, 0, 0, 0.4)
The rgb() syntax expects only three values. To include the fourth alpha value, you should use rgba() instead.
Related
Ho do I draw a specific transparent color with GDI+ ?
I tried this code:
m_image = new Gdiplus::Bitmap( img_w, img_h );
m_graphic = Gdiplus::Graphics::FromImage( m_image );
Gdiplus::Color c( 0, 255, 0, 0 ); // ARGB = 0x00FF0000
m_graphic->Clear( c );
m_image->GetPixel( 0, 0, &c ); //ARGB = 0x00000000 ?!
The color of transparent part of the image is always black. How can I change this?
The Graphics::Clear method clears a Graphicsobject to a specified color.
I have tried your code:
Image m_image(L"C:\\Users\\strives\\Desktop\\apple.jpg");
Graphics *m_graphic = Graphics::FromImage(&m_image);
Gdiplus::Color c(0, 255, 0, 0); // ARGB = 0x00FF0000
m_graphic->Clear(c);
graphics.DrawImage(&m_image, 30, 20);
delete m_graphic;
The final picture is like this.
I think the problem is clear. If you use the clear function and set the color to (0, 255, 0, 0), which defaults to black, then the printed area must be black, and the color of the pixels captured by the GetPixel function below you must be black.
I am trying to apply to a DIV, using Angular 2 style directive, the transform property:
<div
[style.width.px]="front.width"
[style.height.px]="front.height"
[style.background-color]="front.backgroundColor"
[style.transform]="front.transform"></div>
The component data is:
front['width'] = this.width + this.gapw;
front['height'] = this.height + this.gaph;
front['background-color'] = settings.backfacesColor;
front['transform'] = 'rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, ' + hw + 'px )';
I get this warning in the console:
WARNING: sanitizing unsafe style value rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, 207px )
browser_adapter.js:83 WARNING: sanitizing unsafe style value rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, 207px )
browser_adapter.js:83 WARNING: sanitizing unsafe style value rotate3d( 0, 1, 0, 180deg ) translate3d( 0, 0, 207px ) rotateZ( 180deg )
The standard styles like width and background-color are applied. Trasnform does not get applied. Any idea?
UPDATE: Angular2 RC6 onwards, DomSanitizationService has been renamed to DomSanitizer: https://stackoverflow.com/a/39462172/3481582
Original Answer
As you didn't find what you needed in the question I mentioned bellow, I'll try to answer it here.
The reason why you aren't being able to set style.transform is because angular has a sanitize process that prevents malicious code to be injected into your application.
In order to be able to include this style you'll have to tell angular to bypass this value.
First inject the sanitizer in the component constructor
constructor(private sanitizer: DomSanitizationService) {}
Then, use the bypassSecurityTrustStyle function to tell angular to bypass the desired style of the sanitize process.
this.safeTransform = sanitizer.bypassSecurityTrustStyle("rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, ' + hw + 'px )")
An then use it in your template
[style.transform]="safeTransform"
Angular documentation references
https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis
Basically the exact same question as this:
In RC.1 some styles can't be added using binding syntax
The answer is also there.
For the latest version of Angular 2 at the time of this post, #Daniel Pliscki's answer is still valid, except that the proper service inject is now DomSanitizer
https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis
constructor(private: sanitizer:DomSanitizer) {}
ngOnInit() {
this.transformStyle = this.sanitizer.bypassSecurityTrustStyle('....');
}
And then in your template
[style.transform]="transformStyle"
I have a JavaFX 2 application, where all my buttons use the default style (grey gradient). In some special areas of the application, the background color is red, yellow or green. In these areas, I also have buttons.
Instead of re-styling all the different states (normal, hover, pressed) of the button in all three colors, I'd like to just give the button the tint of the background. Is this possible, and how?
If not, is there a way to easily re-style the base button style, and have the hover and pressed states (pseudo-selectors) automatically derived from this style?
If that's not possible, I'm open for suggestions.. My most important goal is to avoid redundant/duplicate declarations (especially of gradients), in case someone wants to add a different color panel later, or just change the shade of one of the background colors.
CSS for the red panel/button:
#my-red-panel {
-fx-border-width: 1;
-fx-border-radius: 5;
-fx-background-radius: 5;
-fx-smooth: true;
-fx-border-color: rgb(209, 65, 42);
-fx-background-color: rgba(255, 78, 50, 0.89);
}
#my-red-panel .button {
-fx-background: rgba(0, 0, 0, 0); /* Now borders look good, but button is still grey*/
}
My best bet so far, is to use a semi-transparent gradient, like so:
#my-red-panel .button {
-fx-background-color: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
}
I still have to declare each state, but at least I can change the underlying colors without having to modify each state. The main problem is that this overrides the entire look of the button, so I was hoping for something better... :-/
Not tested, but try experimenting with:
#my-red-panel {
-fx-base: rgba(255, 78, 50, 0.89);
}
or perhaps:
#my-red-panel .button {
-fx-base: ... ;
}
depending on the exact effects you want.
The trick here is that the default css (caspian.css for JavaFX2.2 or modena.css for JavaFX8) use some pre-defined lookup colors. You can dig out the source for these to see how they are used. If you redefine these lookups for a node in the scene graph, the new definition is propagated to all child nodes.
I have an JavaFX application with a gridpane containing several textfields.
That gridpane is then added to a scrollPane.
Sometimes it happens that the cursor is not visible anymore and the user has to scroll manually. I want to implement some kind of auto scrolling.
I need to detect the following:
1) if mousepointer in one of the textfields is out of sight: how can this be controlled in javafx?
2) if I can check the previous step I can do setVValue to scroll down programmatically.
Thanks in advance
I think you can use following method to scroll programmatically.
ScrollEvent.impl_scrollEvent(ScrollEvent.SCROLL, 0, scrollPixels, 0, 0, null, 0, null, 0, 0, 0, 0, 0, 0, false, false, false, false, false, false));
scrollPixels(use 5/10 value initially and then adjust as per your need) is the variable used as scroll unit.
Code sample:
var headerRowBackground:RGBColor = new RGBColor(0);
headerRowBackground.b = 58;
headerRowBackground.g = 28;
headerRowBackground.r = 255;
printPDF.beginFill(headerRowBackground);
printPDF.addCell(30, 20, "Room");
The word "Room" is in red, as is the rest of the text in the PDF. I actually want to make the cell background colour red. Anybody know why this doesn't work?
You should look at the API more:
printPDF.addCell(30, 20, 'Room', 0, 0, '1', 0xFF0000);
The documentation is wrong, the fill parameter is described as "Link can be internal to do document level navigation (InternalLink) or external (HTTPLink)".
The code to get this working is:
printPDF.beginFill(new RGBColor(0xFF0718));
printPDF.textStyle(new RGBColor(0x000000));
printPDF.addCell(30, 10, "Room", 0, 0, Align.LEFT, 1);
A couple of things about the code:
The fill parameter should be 0 or 1
rather than the fill value. It just
either switches on or off the fill
value previously set.
The text style
should be set too otherwise the text
and background will use the same
colour