QGraphicsEffect 立体边框
时间: 2023-12-12 10:04:04 浏览: 78
可以使用 QGraphicsDropShadowEffect 类为 QGraphicsItem 添加立体边框效果。以下是一个示例:
```cpp
QGraphicsRectItem rectItem;
rectItem.setRect(50, 50, 100, 100);
rectItem.setBrush(Qt::white);
rectItem.setPen(Qt::NoPen);
QGraphicsDropShadowEffect *shadowEffect = new QGraphicsDropShadowEffect;
shadowEffect->setColor(Qt::black);
shadowEffect->setBlurRadius(10);
shadowEffect->setOffset(5, 5);
rectItem.setGraphicsEffect(shadowEffect);
```
在上面的示例中,我们创建了一个 QGraphicsRectItem,并将其填充为白色,没有边框。然后,我们创建了一个 QGraphicsDropShadowEffect 并将其设置为黑色,模糊半径为10,偏移量为 (5, 5)。最后,我们将 QGraphicsDropShadowEffect 应用到 QGraphicsRectItem 上。
这将在 QGraphicsRectItem 周围创建一个立体边框效果。您可以根据需要调整阴影的颜色、模糊半径和偏移量。
相关问题
qraphicsItem 立体边框
QGraphicsItem可以通过设置边框线条的宽度和颜色来实现立体边框的效果。同时,可以通过设置item的Z值来控制其在场景中的前后顺序,从而实现立体效果。
以下是一个简单的示例代码,演示如何设置立体边框:
```python
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QColor, QPen
from PyQt5.QtWidgets import QGraphicsItem
class MyItem(QGraphicsItem):
def __init__(self):
super().__init__()
self.width = 100
self.height = 100
self.color = QColor(200, 200, 200)
self.border_color = QColor(50, 50, 50)
self.pen_width = 2
self.setZValue(1) # 设置Z值为1,使其显示在其他item的前面
def boundingRect(self):
return QRectF(-self.width / 2, -self.height / 2, self.width, self.height)
def paint(self, painter, option, widget):
# 绘制填充区域
painter.setBrush(self.color)
painter.drawRect(-self.width / 2, -self.height / 2, self.width, self.height)
# 绘制立体边框
pen = QPen(self.border_color, self.pen_width, Qt.SolidLine)
painter.setPen(pen)
# 绘制左侧面
painter.drawLine(-self.width / 2, -self.height / 2, -self.width / 2, self.height / 2)
painter.drawLine(-self.width / 2, -self.height / 2, self.width / 2 - self.pen_width, -self.height / 2)
painter.drawLine(-self.width / 2, self.height / 2, self.width / 2 - self.pen_width, self.height / 2)
# 绘制顶部面
painter.drawLine(-self.width / 2, -self.height / 2, self.width / 2 - self.pen_width, -self.height / 2)
painter.drawLine(self.width / 2, -self.height / 2, self.width / 2, self.height / 2)
painter.drawLine(-self.width / 2, -self.height / 2, self.width / 2 - self.pen_width, -self.height / 2)
# 绘制右侧面
painter.drawLine(self.width / 2, -self.height / 2, self.width / 2, self.height / 2)
painter.drawLine(self.width / 2 - self.pen_width, -self.height / 2, self.width / 2 - self.pen_width, self.height / 2)
painter.drawLine(self.width / 2, self.height / 2, self.width / 2 - self.pen_width, self.height / 2)
# 绘制底部面
painter.drawLine(-self.width / 2, self.height / 2, self.width / 2 - self.pen_width, self.height / 2)
painter.drawLine(self.width / 2, -self.height / 2, self.width / 2, self.height / 2)
painter.drawLine(-self.width / 2, self.height / 2, self.width / 2 - self.pen_width, self.height / 2)
```
在上述代码中,我们通过重载`boundingRect()`方法来定义我们的item所占用的矩形区域,然后在`paint()`方法中绘制我们的item。我们首先绘制填充区域,然后绘制四个面的线条,从而形成立体边框的效果。通过设置`QPen`的宽度和颜色,可以控制线条的粗细和颜色。最后,我们通过设置item的Z值来使其显示在其他item的前面,从而实现立体效果。
html好看的立体边框代码
HTML本身并不直接支持添加立体(三维)边框效果,因为它是标记语言,主要用于结构和内容呈现。然而,你可以通过CSS来模拟出类似的效果。这里有一个简单的例子,使用CSS的`border-radius`, `box-shadow`和伪元素`::before`和`::after`来创建一种类似于阴影的“浮雕”效果:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f8f9fa;
border: 1px solid #ccc;
border-radius: 10px;
position: relative;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.box::before,
.box::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: calc(100% + 2px);
background: inherit;
border-radius: inherit;
opacity: 0.2;
z-index: -1;
}
.box::before {
transform: translateY(-1px) rotateX(4deg);
}
.box::after {
transform: translateY(1px) rotateX(-4deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
```
这个代码创建了一个带有一些阴影和旋转的圆形边框,看起来有点立体感。请注意,这并不是真正的3D效果,只是视觉上的模拟。
阅读全文