发帖 回复
返回列表
  • 6800阅读
  • 5回复

[提问]Qml之FileDialog问题 [复制链接]

 上一主题 下一主题
离线songhuirong1
侠客
 
只看楼主 倒序阅读 楼主  发表于: 2019-05-07
用Qml编写了一个程序，程序中用到了选择文件的功能，于是使用了FileDialog，但是在我的手机里显示异常。请问如何解决。代码如下：
复制代码
  1. import QtQuick 2.9
  2. import QtQuick.Window 2.2
  3. import QtQuick.Controls 1.4
  4. import QtQuick.Controls.Styles 1.4
  5. import QtQuick.Dialogs 1.2
  7. Window {
  8.     visible: true
  9.     color: "black"
  11.     onWidthChanged: {
  12.         mask.recalc()
  13.     }
  15.     onHeightChanged: {
  16.         mask.recalc()
  17.     }
  19.     Image {
  20.         id: source
  21.         anchors.fill: parent
  22.         fillMode: Image.PreserveAspectFit
  23.         visible: false
  24.         asynchronous: true
  26.         onStatusChanged: {
  27.             if(Image.Ready == status) {
  28.                 console.log("image loaded")
  29.                 mask.recalc()
  30.             }
  31.         }
  32.     }
  34.     FileDialog {
  35.         id: fileDialog
  36.         title: "Please choose an Image File."
  37.         nameFilters: ["Image Files (*.jpg *.png *.gif)"]
  39.         onAccepted: {
  40.             source.source = fileUrl
  41.         }
  42.     }
  44.     Canvas {
  45.         id: forSaveCanvas
  46.         width: 128
  47.         height: 128
  48.         contextType: "2d"
  49.         visible: false
  50.         z: 2
  51.         anchors.top: parent.top
  52.         anchors.right: parent.right
  53.         anchors.margins: 4
  55.         property var imageData: null
  57.         onPaint: {
  58.             if(null != imageData) {
  59.                 context.drawImage(imageData, 0, 0)
  60.             }
  61.         }
  63.         function setImageData(data) {
  64.             imageData = data
  65.             requestPaint()
  66.         }
  67.     }
  69.     Canvas {
  70.         id: mask
  71.         anchors.fill: parent
  72.         z: 1
  73.         property real w: width
  74.         property real h: height
  75.         property real dx: 0
  76.         property real dy: 0
  77.         property real dw: 0
  78.         property real dh: 0
  79.         property real frameX: 66
  80.         property real frameY: 66
  82.         function calc() {
  83.             var sw = source.sourceSize.width
  84.             var sh = source.sourceSize.height
  86.             if(sw > 0 && sh > 0) {
  87.                 if(sw <= w && sh <= h) {
  88.                     dw = sw
  89.                     dh = sh
  90.                 } else {
  91.                     var sRadio = sw / sh
  92.                     dw = sRadio * h
  94.                     if(dw > w) {
  95.                         dh = w / sRadio
  96.                         dw = w
  97.                     } else {
  98.                         dh = h
  99.                     }
  100.                 }
  102.                 dx = (w - dw) / 2
  103.                 dy = (h - dh) / 2
  104.             }
  105.         }
  107.         function recalc() {
  108.             calc()
  109.             requestPaint()
  110.         }
  112.         function getImageData() {
  113.             return context.getImageData(frameX - 64, frameY - 64, 128, 128)
  114.         }
  116.         onPaint: {
  117.             var ctx = getContext("2d")
  119.             if(dw < 1 && dh < 1) {
  120.                 ctx.fillStyle = "#0000a0"
  121.                 ctx.font = "20pt sans-serif"
  122.                 ctx.textAlign = "center"
  123.                 ctx.fillText("Please Choose An Image File", width / 2, height / 2)
  125.                 return
  126.             }
  128.             ctx.clearRect(0, 0, width, height)
  129.             ctx.drawImage(source, dx, dy, dw, dh)
  130.             var xStart = frameX - 66
  131.             var yStart = frameY - 66
  132.             ctx.save()
  133.             ctx.fillStyle = "#a0000000"
  134.             ctx.fillRect(0, 0, w, yStart)
  135.             var yOffset = yStart + 132
  136.             ctx.fillRect(0, yOffset, w, h - yOffset)
  137.             ctx.fillRect(0, yStart, xStart, 132)
  138.             var xOffset = xStart + 132
  139.             ctx.fillRect(xOffset, yStart, w - xOffset, 132)
  141.             ctx.strokeStyle = "red"
  142.             ctx.fillStyle = "#00000000"
  143.             ctx.lineWidth = 2
  144.             ctx.beginPath()
  145.             ctx.rect(xStart, yStart, 132, 132)
  146.             ctx.fill()
  147.             ctx.stroke()
  148.             ctx.closePath()
  149.             ctx.restore()
  150.         }
  151.     }
  153.     MultiPointTouchArea {
  154.         anchors.fill: parent
  155.         minimumTouchPoints: 1
  156.         maximumTouchPoints: 1
  157.         touchPoints: [
  158.             TouchPoint {
  159.                 id: point1
  160.             }
  161.         ]
  163.         onUpdated: {
  164.             mask.frameX = point1.x
  165.             mask.frameY = point1.y
  166.             mask.requestPaint()
  167.         }
  169.         onReleased: {
  170.             forSaveCanvas.setImageData(mask.getImageData())
  171.             actionPanel.visible = true
  172.         }
  174.         onPressed: {
  175.             actionPanel.visible = false
  176.         }
  177.     }
  179.     Component {
  180.         id: flatButton
  182.         ButtonStyle {
  183.             background: Rectangle {
  184.                 implicitWidth: 70
  185.                 implicitHeight: 30
  186.                 color: control.pressed ? "#a0a0a0" : "#707070"
  187.                 border.width: control.hovered ? 2 : 1
  188.                 border.color: control.hovered ? "#c0c0c0" : "#909090"
  189.             }
  191.             label: Text {
  192.                 anchors.fill: parent
  193.                 font.pointSize: 12
  194.                 horizontalAlignment: Text.AlignHCenter
  195.                 verticalAlignment: Text.AlignVCenter
  196.                 text: control.text
  197.                 color: (control.hovered && !control.pressed) ? "blue" : "white"
  198.             }
  199.         }
  200.     }
  202.     Row {
  203.         id: actionPanel
  204.         anchors.horizontalCenter: parent.horizontalCenter
  205.         anchors.bottom: parent.bottom
  206.         anchors.bottomMargin: 20
  207.         spacing: 8
  208.         z: 5
  210.         Button {
  211.             style: flatButton
  212.             text: "Open"
  214.             onClicked: {
  215.                 fileDialog.open()
  216.             }
  217.         }
  219.         Button {
  220.             style: flatButton
  221.             text: "Save"
  223.             onClicked: {
  224.                 forSaveCanvas.save("selected.png")
  225.                 actionPanel.visible = false
  226.             }
  227.         }
  229.         Button {
  230.             style: flatButton
  231.             text: "Cancel"
  233.             onClicked: {
  234.                 actionPanel.visible = false
  235.             }
  236.         }
  237.     }
  238. }

手机运行截图如下：
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线20091001753
论坛版主
只看该作者 1楼 发表于: 2019-05-07
异常是因为你把字体弄得太大了。
(づ￣ 3￣)づ
回复
举报
离线songhuirong1
侠客
只看该作者 2楼 发表于: 2019-05-08
回 20091001753 的帖子
20091001753:异常是因为你把字体弄得太大了。 (2019-05-07 19:09) 

代码并没有设置字体大小，FileDialog好像没有font属性吧
回复
举报
离线20091001753
论坛版主
只看该作者 3楼 发表于: 2019-05-08
你发的代码里，搜索 font 就有2处：
ctx.font = "20pt sans-serif"
font.pointSize: 12

建议你淘宝购买 qml 的入门书籍，边看边练
(づ￣ 3￣)づ
回复
举报
离线songhuirong1
侠客
只看该作者 4楼 发表于: 2019-05-08
回 20091001753 的帖子
20091001753:你发的代码里，搜索 font 就有2处：
ctx.font = "20pt sans-serif"
font.pointSize: 12
建议你淘宝购买 qml 的入门书籍，边看边练 (2019-05-08 11:35) 

这个不是设置FileDialog的字体的，我写过一个简单demo，里面只有一个open按钮，点击按钮就只是简单的打开FileDialog，什么操作也没有，结果显示也是这样的，这个跟字体没有关系的。
回复
举报
离线songhuirong1
侠客
只看该作者 5楼 发表于: 2019-05-08
回 20091001753 的帖子
20091001753:你发的代码里，搜索 font 就有2处：
ctx.font = "20pt sans-serif"
font.pointSize: 12
建议你淘宝购买 qml 的入门书籍，边看边练 (2019-05-08 11:35) 

我写了一段简单的代码，如下：
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2

Window {
    visible: true
    title: qsTr("Hello World")

    FileDialog {
        id: fileDlg
        title: qsTr("Open File")
        nameFilters: [qsTr("All file(*.*)")]
    }

    Button {
        anchors.centerIn: parent
        text: qsTr("Open")

        onClicked: {
            fileDlg.open()
        }
    }
}
这里没有设置任何字体，显示也一样有问题。所以这个跟字体没有关系，应该跟FileDialog的实现有关，FileDialog是跟系统相关的
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个