Qt3d svg or png Texture with opacity=0 QTextureMaterial on QPlaneMesh - svg

I tried to add the svg image which contains opacity=0 area into QTextureMaterial on QPlaneMesh, but it shows that the Plane's background is always in gray.
I want that the plane can cantain my image and penetrate to other object in opacity=0 area.
The svg file like https://image.flaticon.com/icons/svg/3154/3154348.svg .
code:
// Background
Qt3DCore::QEntity *planeEntity = new Qt3DCore::QEntity(rootEntity);
Qt3DExtras::QPlaneMesh *planeMesh = new Qt3DExtras::QPlaneMesh(planeEntity);
planeMesh->setHeight(2);
planeMesh->setWidth(2);
Qt3DExtras::QTextureMaterial *planeMaterial = new Qt3DExtras::QTextureMaterial(planeEntity);
Qt3DRender::QTexture2D *planeTexture = new Qt3DRender::QTexture2D(planeMaterial);
FlippedTextureImage *planeTextureImage = new FlippedTextureImage(planeTexture);
planeTextureImage->setSize(QSize(3507, 3000));
planeTexture->addTextureImage(planeTextureImage);
planeMaterial->setTexture(planeTexture);
Qt3DCore::QTransform *planeTransform = new Qt3DCore::QTransform(planeEntity);
planeTransform->setRotationX(90);
planeTransform->setTranslation(QVector3D(0, 0, 0));
Qt3DExtras::QPhongAlphaMaterial *pam2 = new Qt3DExtras::QPhongAlphaMaterial(planeEntity);
pam2->setAlpha(0);
planeEntity->addComponent(planeMesh);
planeEntity->addComponent(pam2);
planeEntity->addComponent(planeMaterial);
planeEntity->addComponent(planeTransform);
class FlippedTextureImage : public Qt3DRender::QPaintedTextureImage
{
public:
FlippedTextureImage(Qt3DCore::QNode *parent = Q_NULLPTR):Qt3DRender::QPaintedTextureImage(parent) {}
void paint(QPainter *painter) override {
QSvgRenderer renderer(QString(qApp->applicationDirPath() + "/gift.svg"));
QImage image(3000, 3000, QImage::Format_RGBA64); // 512x512 RGBA
image.fill(0x00ffffff); // white background
QPainter painter2(&image);
renderer.render(&painter2);
painter->drawImage(0, 0, image);
}
};
and run code like this

QTextureMaterial doesn't support transparency in the textures.
Check out my answer to this question to see how to implement transparency in textures yourself. There is not out-of-the-box solution in Qt3D.

Related

How do I change the background color of a tabbed page in Xamarin iOS?

I need to change the background color of the currently tabbed page in my UITabBarController. I've searched through every stackoverflow post I could find but nothing worked for me. I thought there would be something like UITabBar.Appearance.SelectedImageTintColor, just for the background color but it doesn't seem so.
For example, I want to change the color of that part when I am on the right tab:
Does someone know how to do that?
You could invoked the following code in your UITabBarController
public xxxTabBarController()
{
//...set ViewControllers
this.TabBar.BarTintColor = UIColor.Red;
}
Update
//3.0 here is if you have three child page in tab , set it as the current value in your project
//
var size = new CGSize(TabBar.Frame.Width / 3.0, IsFullScreen());
this.TabBar.SelectionIndicatorImage = ImageWithColor(size,UIColor.Green);
double IsFullScreen()
{
double height = 64;
if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0))
{
if (UIApplication.SharedApplication.Delegate.GetWindow().SafeAreaInsets.Bottom > 0.0)
{
height = 84;
}
}
return height;
}
UIImage ImageWithColor(CGSize size, UIColor color)
{
var rect = new CGRect(0, 0, size.Width, size.Height);
UIGraphics.BeginImageContextWithOptions(size, false, 0);
CGContext context = UIGraphics.GetCurrentContext();
context.SetFillColor(color.CGColor);
context.FillRect(rect);
UIImage image = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
return image;
}
The trick is to use the SelectionIndicatorImage Property of the UITabBar and generate a completely filled image with your desired color using the following method:
private UIImage ImageWithColor(CGSize size)
{
CGRect rect = new CGRect(0, 0, size.Width, size.Height);
UIGraphics.BeginImageContext(size);
using (CGContext context = UIGraphics.GetCurrentContext())
{
context.SetFillColor(UIColor.Green); //change color if necessary
context.FillRect(rect);
}
UIImage image = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
return image;
}
To initialize everything we override ViewWillLayoutSubviews() like this:
public override void ViewWillLayoutSubviews()
{
base.ViewWillLayoutSubviews();
// The tabbar height will always be 49 unless we force it to reevaluate it's size on runtime ...
myTabBar.InvalidateIntrinsicContentSize();
double height = myTabBar.Frame.Height;
CGSize size = new CGSize(new nfloat(myTabBar.Frame.Width / myTabBar.Items.Length, height));
// Now get our all-green image...
UIImage image = ImageWithColor(size);
// And set it as the selection indicator
myTabBar.SelectionIndicatorImage = image;
}
As mentioned in this article (google translating it step by step when necessary lol) calling InvalidateIntrinsicContentSize() will force the UITabBar to reevaluate it's size and will get you the actual runtime height of the tab bar (instead of the constant 49 height value from XCode).

Color of texture skybox unity

I'm working with google cardboard in unity.
In my main scene I have a skybox with an image as texture.
How can I get the color of the pixel I'm looking?
The skybox is an element of mainCamera, that is child of "Head".
I put also GvrReticle as child of head; is it useful for my purpose?
Thanks
Basically you wait for the end of the frame so that the camera has rendered. Then you read the rendered data into a texture and get the center pixel.
edit Be aware that if you have a UI element rendered in the center it will show the UI element color not the color behind.
private Texture2D tex;
public Color center;
void Awake()
{
StartCoroutine(GetCenterPixel());
}
private void CreateTexture()
{
tex = new Texture2D(1, 1, TextureFormat.RGB24, false);
}
private IEnumerator GetCenterPixel()
{
CreateTexture();
while (true)
{
yield return new WaitForEndOfFrame();
tex.ReadPixels(new Rect(Screen.width / 2f, Screen.height / 2f, 1, 1), 0, 0);
tex.Apply();
center = tex.GetPixel(0,0);
}
}

Xamarin Forms Svg Gradient background

So im trying to implement a svg gradiant background image but when i set the svg image it only displays the solid colour(gradient just doesnt display).
This is the code im using and ive tested it on regular svg images and works fine but doesnt work whenever I add a gradient svg file.
public App()
{
// The root page of your application
MainPage = new ContentPage
{
Content = new StackLayout
{
BackgroundColor = Color.White,
VerticalOptions = LayoutOptions.FillAndExpand,
Children =
{
new SvgImage
{
SvgPath = "SVG_Test.Images.drawing.svg",
SvgAssembly = typeof(App).GetTypeInfo().Assembly,
HeightRequest = 1000,
WidthRequest = 500
}
}
}
};
}
Could anyone point me in the right direction?

Draw string vertically with transparent background

I would like to draw a string on the screen, rotated by 90 degrees, on a transparent background:
public static void drawStringWithTransformROT90(String text, int x, int y, int color, Graphics g) {
// create a mutable image with white background color
Image im = Image.createImage(g.getFont().stringWidth(text), g.getFont().getHeight());
Graphics imGraphics = im.getGraphics();
// set text color to black
imGraphics.setColor(0x00000000);
imGraphics.drawString(text, 0, 0, Graphics.TOP|Graphics.LEFT);
int[] rgbData = new int[im.getWidth() * im.getHeight()];
im.getRGB(rgbData, 0, im.getWidth(), 0, 0, im.getWidth(), im.getHeight());
for (int i = 0; i < rgbData.length; i++) {
// if it is the background color (white), set it to transparent
if (rgbData[i] == 0xffffffff) {
rgbData[i] = 0x00000000;
} else {
// otherwise (black), change the text color
rgbData[i] = color;
}
}
Image imageWithAlpha = Image.createRGBImage(rgbData, im.getWidth(), im.getHeight(), true);
Sprite s = new Sprite(imageWithAlpha);
// rotate the text
s.setTransform(Sprite.TRANS_ROT90);
s.setPosition(x, y);
s.paint(g);
}
Is there any better way to do this? Should I create a transparent image with the alphabet rotated, and draw it using a Sprite object?
import javax.microedition.lcdui.*;
import javax.microedition.lcdui.game.Sprite;
public class MyCanvas extends Canvas {
public void paint(Graphics g) {
//The text that will be displayed
String s="java";
//Create the blank image, specifying its size
Image img=Image.createImage(50,50);
//Create an instance of the image's Graphics class and draw the string to it
Graphics gr=img.getGraphics();
gr.drawString(s, 0, 0, Graphics.TOP|Graphics.LEFT);
//Display the image, specifying the rotation value. For example, 90 degrees
g.drawRegion(img, 0, 0, 50, 50, Sprite.TRANS_ROT90, 0, 0, Graphics.TOP|Graphics.LEFT);
}
}
As found at http://wiki.forum.nokia.com/index.php/How_to_display_rotated_text_in_Java_ME
If you use Java2D for drawing you can specify java.awt.Graphics2D#setTransform.

Managed DirectX Postprocessing Fragment Shader rendering problem

I'm using Managed Direct X 2.0 with C# and I'm attempting to apply a fragment shader to a texture built by rendering the screen to a texture using the RenderToSurface helper class.
The code I'm using to do this is:
RtsHelper.BeginScene(RenderSurface);
device.Clear(ClearFlags.Target | ClearFlags.ZBuffer, Color.White, 1.0f, 0);
//pre-render shader setup
preProc.Begin(FX.None);
preProc.BeginPass(0);
//mesh drawing
mesh.DrawSubset(j);
preProc.CommitChanges();
preProc.EndPass();
preProc.End();
RtsHelper.EndScene(Filter.None);
which renders to my Surface, RenderSurface, which is attached to a Texture object called RenderTexture
Then I call the following code to render the surface to the screen, applying a second shader "PostProc" to the rendered texture. This shader combines color values on a per pixel basis and transforms the scene to grayscale. I'm following the tutorial here: http://rbwhitaker.wikidot.com/post-processing-effects
device.BeginScene();
{
using (Sprite sprite = new Sprite(device))
{
sprite.Begin(SpriteFlags.DoNotSaveState);
postProc.Begin(FX.None);
postProc.BeginPass(0);
sprite.Draw(RenderTexture, new Rectangle(0, 0, WINDOWWIDTH, WINDOWHEIGHT), new Vector3(0, 0, 0), new Vector3(0, 0, 0), Color.White);
postProc.CommitChanges();
postProc.EndPass();
postProc.End();
sprite.End();
}
}
device.EndScene();
device.Present();
this.Invalidate();
However all I see is the original rendered scene, as rendered to the texture, but unmodified by the second shader.
FX file is below in case it's important.
//------------------------------ TEXTURE PROPERTIES ----------------------------
// This is the texture that Sprite will try to set before drawing
texture ScreenTexture;
// Our sampler for the texture, which is just going to be pretty simple
sampler TextureSampler = sampler_state
{
Texture = <ScreenTexture>;
};
//------------------------ PIXEL SHADER ----------------------------------------
// This pixel shader will simply look up the color of the texture at the
// requested point, and turns it into a shade of gray
float4 PixelShaderFunction(float2 TextureCoordinate : TEXCOORD0) : COLOR0
{
float4 color = tex2D(TextureSampler, TextureCoordinate);
float value = (color.r + color.g + color.b) / 3;
color.r = value;
color.g = value;
color.b = value;
return color;
}
//-------------------------- TECHNIQUES ----------------------------------------
// This technique is pretty simple - only one pass, and only a pixel shader
technique BlackAndWhite
{
pass Pass1
{
PixelShader = compile ps_1_1 PixelShaderFunction();
}
}
Fixed it. Was using the wrong flags for the post processor shader initialization
was:
sprite.Begin(SpriteFlags.DoNotSaveState);
postProc.Begin(FX.None);
should be:
sprite.Begin(SpriteFlags.DoNotSaveState);
postProc.Begin(FX.DoNotSaveState);

Resources