QML如何裁剪图像&从单个图像中提取图像
QML如何裁剪图像&从单个图像中提取图像
提问于 2019-10-21 09:31:54
我有一幅图像，按以下顺序显示数字:--
0 1 2 3 4 5 6 7 8 9我要显示表读数..。那么现在如何从这个图像中创建单个数字的子图像，这样我就可以分别显示每个数字了。意思是说，我想从这个图像中提取数字图像，这样我就可以在读数表上分别显示它们。请建议一下。
完整图像大小为108x16。
我尝试使用列，然后使用中继器复制图像，但是如何在中继器内更改图像的x，y，以使中继器内的图像被裁剪。所以我从图像中提取数字..。？
我创建了列的图像..。使用中继器。但无法剪辑真实的图像..。所以X，Y坐标变化..。每一列都包含图像中的数字。
Window {
visible: true
width: 400
height: 300
color: "grey"
Item {
id: container
anchors.centerIn: parent
width: 12
height: 16
clip: true
property int position: 0
Column {
id: image
y: -container.position * 16
Repeater {
model: 10
delegate: Rectangle {
width: 12
height: 16
Image {
anchors.fill: parent
source: "files/REE Demo images/odo_font_orange.png"
}
}
}
}
}
Timer {
interval: 1000
repeat: true
running: true
onTriggered: {
if(container.position == 9)
container.position = 0;
else
container.position ++
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-10-21 10:30:11
您应该使用clip:true将图像放在容器中，然后播放内容项的x/y，例如：
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 400
height: 300
Item {
id: container
anchors.centerIn: parent
width: 30
height: 30
clip: true
property int position: 0
Column {
id: image
y: -container.position * 30
Repeater {
model: 10
delegate: Rectangle {
width: 30
height: 30
Text {
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: index
font.pixelSize: 20
color: "orange"
}
}
}
}
}
Timer {
interval: 1000
repeat: true
running: true
onTriggered: {
if(container.position == 9)
container.position = 0;
else
container.position ++
}
}
}这里，我将Image替换为Column项，以说明这个想法。你可能想要添加一些移动动画等。
更新:考虑到您的形象：
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 400
height: 300
Item {
id: container
anchors.centerIn: parent
width: 12
height: 16
clip: true
property int position: 1
Image {
id: image
x: -container.position * 12
source: "http://i.stack.imgur.com/jnbEZ.png"
}
}
Timer {
interval: 1000
repeat: true
running: true
onTriggered: {
if(container.position == 9)
container.position = 0;
else
container.position ++
}
}
}但是由于你的图像不对齐，所以结果有点粗糙。你需要10个大小相同的细胞。
Stack Overflow用户
发布于 2019-10-24 11:37:53
您可能需要使用雪碧和SpriteSequence。显然，您必须将运行设置为true，以便可以使用jumpTo方法手动设置所需的帧(数字)。
因为你的图像不是120像素宽，这意味着你的精灵是不一样的大小。但我建议您在原始图像中选择12像素宽帧。如果您的精灵有不同的大小，SpriteSequence会将它的大小调整到它自己的大小。这意味着您必须手动设置每个Sprite对象的frameX以获得良好的视觉外观。
SpriteSequence {
id: digit
width: 12
height: 16
interpolate: false
goalSprite: ""
running: true
property var sourceImage: 'files/REE Demo images/odo_font_orange.png'
Sprite{
name: "1"
source: digit.sourceImage
frameCount: 1
frameWidth: 12
frameHeight: 16
frameX: 0
frameY: 0
}
Sprite{
name: "2"
source: digit.sourceImage
frameCount: 1
frameWidth: 12
frameHeight: 16
frameX: 12
frameY: 0
}
//other digits with their topleft and width/height
//in original image should be repeated with their own name
function setNumber(n){
digit.jumpTo(n);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58483493
复制相关文章
相似问题
腾讯云开发者
