I am trying to apply clippath on image, i am passing rect as clippath to image and size of rect is same as image including scale, still after apply clippath image cropped like clipath is less then what we applied.
i have checked clippath scaled width , height after apply is still same but image is clipped bit small like given in attached image.
var rect = new fabric.Rect({
left: 0,
top: 0,
width: obj.getScaledWidth(),
height: obj.getScaledHeight(),
originX: 'center',
originY: 'center'
});
rect.setCoords();
obj.clipPath = rect;
obj.clipPath.dirty = true;
obj.dirty = true; canvas.renderAll();
My fabric version is 3.4.0.
original image on left side and after apply same size rect as clippath clipped image on right side, actual result should be same size image without any clipped part
one thing i have noticed is cacheHeight and cacheWidth of clipath is less then width and height of clippath. please find below screenshot, is it reason for that, if then what will be solution?
We are building the shapes for conveyors, Is there any way to create a rounded border for the images? The below images, which are png files, have square borders around the selected Images.
While Searching we found this code from the link
CSS Border on PNG image with transparent parts
img{
-webkit-filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
filter:drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
}
Is there any way to add drop-shadow to the images in canvas?
Kindly help us with relevant codes and suggestions.
I did this by the properties shadow and strokeWidth(in css by adding shadow). So that image will be like this.
item.strokeWidth = 15;
item.shadow = new fabric.Shadow({color:'red',blur:15,affectStroke:true});
Present Output:
If someone has a better solution kindly brainstorm me.
I created a pushButton with a border image using Qt Designer. The stylesheet of the pushButton looks like the following.
border-image: transparent;
border-image: url(:/button_img/main_button.png);
The button looks like as follows:
The button works as expected but I do not know how can I set border inset or onset for that button. My terminologies might be wrong because I am very new to GUI development. What I am looking for is when you creata a normal pushButton, you can visualy see when you click that button. But in my case the button works but I cannot see the graphics when I click the button.
How can I add the border inset or onset? Please let me know in case of additional information.
No, you can't; not like that.
As the name hints, the border-image CSS property is used to draw borders; while what you see seems like a "background image", it actually is a border object that splits your image in a 3x3 grid rectangle that covers the whole button area; each section is then "stretched" to fill its own rectangle.
+-----------+---------+------------+
| top left | top | top right |
+-----------+---------+------------+
| left | center | right |
+-----------+---------+------------+
|bottom left| bottom |bottom right|
+-----------+---------+------------+
To understand how all of this works, read the "Common Mistakes" section of the stylesheet examples documentation. Here's what actually happens (I'm using half-width/half-height margins for the sake of the argument, so only the 4 "angle" rectangles are shown, so the left, top, right, bottom and center rectangles will be null):
If you want to use style sheets that interactively show borders, the standard approach is have 2 different images for the button state, and both of them needs their border. If you also want to achieve the "hover" effect, you'll need a third image that will have no border at all.
The downside of this method is that if the icon is resized, the border will be resized too.
The only alternative I can think of is to subclass your own QPushButton widget and override its paintEvent method. You could also use an event filter, but that wouldn't give you any major benefit, as it would use a very similar approach anyway, while complicating things if the object tree is even slightly complex.
In the following example I use an implementation that is based on stylesheets only: Qt can use the qproperty-* stylesheet parameter to set existing properties of a class (Qt properties that are already part of the class, or that are added in the class constructor: using setProperty on an unexisting property within the __init__ method will not work).
While this kind of implementation is usually not required (you could set the pixmap attribute of the class instance by hand) the advantage is that with this approach you can set everything within the stylesheet only.
class PixmapButton(QtWidgets.QPushButton):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self._pixmap = QtGui.QPixmap()
self.setCheckable(True)
self.setSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding)
#QtCore.pyqtProperty(QtGui.QPixmap)
def pixmap(self):
return self._pixmap
#pixmap.setter
def pixmap(self, pixmapPath):
self._pixmap = QtGui.QPixmap(pixmapPath)
def paintEvent(self, event):
opt = QtWidgets.QStyleOptionButton()
self.initStyleOption(opt)
qp = QtGui.QPainter(self)
# draw the basic button
self.style().drawControl(QtWidgets.QStyle.CE_PushButton, opt, qp, self)
if self._pixmap.isNull():
return
# get the minimum possible size for the pixmap icon
minSize = min(self.width(), self.height())
# remove the margin/padding usually necessary for the button contents
minSize -= self.style().pixelMetric(QtWidgets.QStyle.PM_ButtonMargin, opt, self) * 2
# create a rectangle based on the minimal size and move it to the center
# of the button
rect = QtCore.QRect(0, 0, minSize, minSize)
rect.moveCenter(self.rect().center())
# finally, draw the "icon"
qp.drawPixmap(rect, self._pixmap.scaled(rect.size(), QtCore.Qt.KeepAspectRatio, QtCore.Qt.SmoothTransformation))
Here's a test window that will show the border-image implementation on top (along with its border splitting), and the subclass painting at the bottom.
class Test(QtWidgets.QWidget):
def __init__(self):
super().__init__()
layout = QtWidgets.QGridLayout(self)
layout.addWidget(QtWidgets.QLabel('basic border-image'), 0, 0, QtCore.Qt.AlignCenter)
borderButton = QtWidgets.QPushButton()
layout.addWidget(borderButton, 1, 0, QtCore.Qt.AlignCenter)
borderButton.setSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding)
borderButton.setFixedSize(120, 120)
borderButton.setStyleSheet('''
border-image: url(play.png);
''')
layout.addItem(QtWidgets.QSpacerItem(120, 0, QtWidgets.QSizePolicy.Expanding))
layout.addWidget(QtWidgets.QLabel('expanded border-image'), 0, 1, QtCore.Qt.AlignCenter)
borderButtonExpanded = QtWidgets.QPushButton()
layout.addWidget(borderButtonExpanded, 1, 1)
borderButtonExpanded.setSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding)
borderButtonExpanded.setStyleSheet('''
border-image: url(play.png) 60 60 60 60;
border-top: 60px transparent;
border-bottom: 60px transparent;
border-right: 60px transparent;
border-left: 60px transparent;
''')
layout.addItem(QtWidgets.QSpacerItem(0, 10))
layout.addWidget(QtWidgets.QLabel('paintEvent implementation'), 2, 0, 1, 2, QtCore.Qt.AlignCenter)
pmButton = PixmapButton()
layout.addWidget(pmButton, 3, 0, 1, 2)
pmButton.setMinimumSize(120, 120)
pmButton.setStyleSheet('''
QPushButton {
qproperty-pixmap: url(play.png);
/* hover mode: while there's no border shown, we can set the
default radius for the hover and pressed statuses */
border: none;
border-radius: 4px;
}
/* show border only if hovered or is checkable */
QPushButton:hover, QPushButton[checkable="true"] {
border: 1px outset green;
}
QPushButton:pressed, QPushButton:checked {
border: 1px inset green;
}
''')
pmButton2 = PixmapButton()
layout.addWidget(pmButton2, 4, 0, 1, 2)
pmButton2.setCheckable(True)
pmButton2.setMinimumSize(120, 120)
pmButton2.setStyleSheet(pmButton.styleSheet())
Note: This is a very simplified implementation. It does not check if the user sets a custom icon for the button, and there should be no button text at all.
I'm trying to create an SVG element with a width defined by a percentage of the parent and a fixed value, say 50% + 20px. For normal html elements, in the CSS you can use calc(50% + 20px). Is there an equivalent way to do this for embedded SVGs? Specifically, I'm using snap.svg, though I'm not sure if this capability exists with SVGs in general.
EDIT:
Tried setting <svg> width with percentages and px, which I couldn't get to work. I tried both:
<svg width='calc(50% + 20px)'>...</svg>
<svg width='50% + 20px'>...</svg>
I also tried setting it in CSS:
svg {
width: calc(50% + 20px);
}
It should be possible with the upcoming SVG2 as width etc. become geometry properties and then you can style them with calc
So I've run into this problem a lot but not until a recent project did it bug me immensely.
<div style="background-image:url(img/s_top_ribbon_terminal.png); height:6px;"></div>
<div style="background-color:#FFF; box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px; -moz-box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px; -webkit-box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px;">Lorem Ipsum</div>Lorem Ipsum
Basically, the situation goes: I have an element with an image or text that goes before another element which incorporates box shadow. The box shadow would then proceed to go over the first element, when I want the first element to be "in front of" (if that makes sense) the second element's shadow. How would I be able to do that? I tried z-index, but that didn't really seem to work?
z-index will work. Make sure to utilize positioning (absolute, relative, or fixed) on the elements.