songhuirong1 |
2019-05-07 09:12 |
Qml之FileDialog问题
用Qml编写了一个程序,程序中用到了选择文件的功能,于是使用了FileDialog,但是在我的手机里显示异常。请问如何解决。代码如下:- import QtQuick 2.9
import QtQuick.Window 2.2 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import QtQuick.Dialogs 1.2
Window { visible: true color: "black"
onWidthChanged: { mask.recalc() }
onHeightChanged: { mask.recalc() }
Image { id: source anchors.fill: parent fillMode: Image.PreserveAspectFit visible: false asynchronous: true
onStatusChanged: { if(Image.Ready == status) { console.log("image loaded") mask.recalc() } } }
FileDialog { id: fileDialog title: "Please choose an Image File." nameFilters: ["Image Files (*.jpg *.png *.gif)"]
onAccepted: { source.source = fileUrl } }
Canvas { id: forSaveCanvas width: 128 height: 128 contextType: "2d" visible: false z: 2 anchors.top: parent.top anchors.right: parent.right anchors.margins: 4
property var imageData: null
onPaint: { if(null != imageData) { context.drawImage(imageData, 0, 0) } }
function setImageData(data) { imageData = data requestPaint() } }
Canvas { id: mask anchors.fill: parent z: 1 property real w: width property real h: height property real dx: 0 property real dy: 0 property real dw: 0 property real dh: 0 property real frameX: 66 property real frameY: 66
function calc() { var sw = source.sourceSize.width var sh = source.sourceSize.height
if(sw > 0 && sh > 0) { if(sw <= w && sh <= h) { dw = sw dh = sh } else { var sRadio = sw / sh dw = sRadio * h
if(dw > w) { dh = w / sRadio dw = w } else { dh = h } }
dx = (w - dw) / 2 dy = (h - dh) / 2 } }
function recalc() { calc() requestPaint() }
function getImageData() { return context.getImageData(frameX - 64, frameY - 64, 128, 128) }
onPaint: { var ctx = getContext("2d")
if(dw < 1 && dh < 1) { ctx.fillStyle = "#0000a0" ctx.font = "20pt sans-serif" ctx.textAlign = "center" ctx.fillText("Please Choose An Image File", width / 2, height / 2)
return }
ctx.clearRect(0, 0, width, height) ctx.drawImage(source, dx, dy, dw, dh) var xStart = frameX - 66 var yStart = frameY - 66 ctx.save() ctx.fillStyle = "#a0000000" ctx.fillRect(0, 0, w, yStart) var yOffset = yStart + 132 ctx.fillRect(0, yOffset, w, h - yOffset) ctx.fillRect(0, yStart, xStart, 132) var xOffset = xStart + 132 ctx.fillRect(xOffset, yStart, w - xOffset, 132)
ctx.strokeStyle = "red" ctx.fillStyle = "#00000000" ctx.lineWidth = 2 ctx.beginPath() ctx.rect(xStart, yStart, 132, 132) ctx.fill() ctx.stroke() ctx.closePath() ctx.restore() } }
MultiPointTouchArea { anchors.fill: parent minimumTouchPoints: 1 maximumTouchPoints: 1 touchPoints: [ TouchPoint { id: point1 } ]
onUpdated: { mask.frameX = point1.x mask.frameY = point1.y mask.requestPaint() }
onReleased: { forSaveCanvas.setImageData(mask.getImageData()) actionPanel.visible = true }
onPressed: { actionPanel.visible = false } }
Component { id: flatButton
ButtonStyle { background: Rectangle { implicitWidth: 70 implicitHeight: 30 color: control.pressed ? "#a0a0a0" : "#707070" border.width: control.hovered ? 2 : 1 border.color: control.hovered ? "#c0c0c0" : "#909090" }
label: Text { anchors.fill: parent font.pointSize: 12 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter text: control.text color: (control.hovered && !control.pressed) ? "blue" : "white" } } }
Row { id: actionPanel anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.bottom anchors.bottomMargin: 20 spacing: 8 z: 5
Button { style: flatButton text: "Open"
onClicked: { fileDialog.open() } }
Button { style: flatButton text: "Save"
onClicked: { forSaveCanvas.save("selected.png") actionPanel.visible = false } }
Button { style: flatButton text: "Cancel"
onClicked: { actionPanel.visible = false } } } }
手机运行截图如下: [attachment=20273]
|
|