I'm exporting a Fabricjs egText to PDF on Node server using PDFKit module.
It auto adds a border around my text when export to PDF.
On drawing canvas: On drawing canvas img
On PDF: On PDF img
As you see, it has a very light border around text.
And if I set the backgroundColor of text to rgba(255, 255, 255, 0), the border is disappear.
Do you know how to fix it or any sugguestion ?
When i add a white blackground rectangle under the text, the border is disappear on the part of text that on the rectangle, at the rest, the border still active.
The image here: Two parts of text Img
Related
I am having an issue with jetpack compose canvas when using #Preview, I would like to display all the content to fill the canvas in the preview but it doesn't currently.
I am setting 375dp width and then a Rect with 375f, I understand that dp is different than just float, but how can I set the width so the green rect fills the canvas without using canvas.width for example as the rect width?
When drawing on Canvas you're operating with pixels, not Dp. onDraw is called on DrawScope, and it has size property which is already converted to pixels:
Canvas(Modifier) {
drawRect(color = Color.Green, size = size)
}
Also DrawScope is inherited from Density, so you can convert any Dp to pixels with 375.toDp().
I see from https://vega.github.io/vega-lite/docs/config.html that it is possible to change the background color. But i don't see any docs for adding an underlay background image.
vega-lite creates a canvas element.
So adding a background image is explained in a question about how to add a background to a canvas element.
HTML5 Canvas background image
But you can just do it with css:
canvas {
background: url("my_background.png");
}
This is just like any other background image css.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
I am trying to use mask on my QWidget. I want to overlay existing widget with row of buttons - similar to Skype
Notice that these buttons don't have jagged edges - they are nicely antialiased and widget below them is still visible.
I tried to accomplish that using Qt Stylesheets but on pixels that should be "masked out" was just black colour - it was round button on black, rectangular background.
Then I tried to do this using QWidget::mask(). I used following code
QImage alpha_mask(QSize(50, 50), QImage::Format_ARGB32);
alpha_mask.fill(Qt::transparent);
QPainter painter(&alpha_mask);
painter.setBrush(Qt::black);
painter.setRenderHint(QPainter::Antialiasing);
painter.drawEllipse(QPoint(25,25), 24, 24);
QPixmap mask = QPixmap::fromImage(alpha_mask);
widget.setMask(mask.mask());
Sadly, it results in following effect
"Edges" are jagged, where they should be smooth. I saved generated mask so I could investigate if it was the problem
it wasn't.
I know that Linux version of Skype does use Qt so it should be possible to reproduce. But how?
One possible approach I see is the following.
Prepare a nice high resolution pixmap with the circular button icon over transparent background.
Paint the pixmap on a square widget.
Then mask the widget leaving just a little bit of margin beyond the border of the circular icon so that the widget mask jaggedness won't touch the smooth border of the icon.
I managed to get a nice circular button with not so much code.
Here is the constructor of my custom button:
Button::Button(Type t, QWidget *parent) : QPushButton(parent) {
setIcon(getIcon(t));
resize(30,30);
setMouseTracking(true);
// here I apply a centered mask and 2 pixels bigger than the button
setMask(QRegion(QRect(-1,-1,32,32),QRegion::Ellipse));
}
and in the style sheet I have the following:
Button {
border-radius: 15px;
background-color: rgb(136, 0, 170);
}
With border-radius I get the visual circle and the mask doesn't corrupt the edges because it is 1 pixel away.
You are using the wrong approach for generating masks. I would generate them from the button images themselves:
QImage image(widget.size(), QImage::Format_Alpha8);
widget.render(&image);
widget.setMask(QBitmap::fromImage(image.createMaskFromColor(qRgba(0, 0, 0, 0))));
I am editing PDFs using PDFsharp (editing in the sense of adding images, text etc.), and that works perfectly well.
gfx.DrawImage(img, pointX, pointY, width, height);
gfx.DrawString(text, thumbFont, XBrushes.Black,
new XRect(pointX + 10, pointY + height + 2, width - 10, 5), XStringFormats.TopLeft);
But when I am trying to edit a PDF which has Rotate property as 270, the added text, images are coming horizontally.
The actual problem that I am facing is, the PDF is not actually rotated, it just changes the Page.Rotate property, so my question is how to add text and image at the correct co-ordinate and in correct orientation to have rotation of 270.
The rotation is applied to the page at display time. 270° clockwise are 90° counter-clockwise.
AFAIK you have to rotate the text you are adding to the PDF 270° CCW (90° CW) so the text shows normally on the rotated PDF page.
I have Button image with Rounded Button image. I am tiling image to get bigger button in QML . I am using parent as rectangle and image as BorderImage. After tiling I am getting rectangle on top image is visible. I need to remove the part of the rectangle so that only rounded button image (Has transparency) is Visible. Even i need to change the color of the behind rectangle so that Color animation is possible.
Please suggest efficient method to remove the behind rectangle and provide the color animation also.
I am attaching the Rounded button border image as attachment and source code for tiling the button image.
Rectangle{
id:outerBorderRect
smooth:true
anchors.fill:parent
//opacity:.25
//border.width:0
BorderImage{
id:innerBorderRect
smooth:true
anchors.fill:parent
border{left:20;top:16;right:17;bottom:20}
horizontalTileMode:BorderImage.Round
verticalTileMode:BorderImage.Round
source:"button_3.png"
}
}
A simple and semi-hack way to do this is to use the radius property in Rectangle to hide the corners of your button.
Or you could use a proper mask by using Qt's OpacityMask.
I'm not sure what kind of animation you're looking for. You'll have to provide more details for me to answer that part.