QML-矢印キーで項目を移動する

Question

Windows 8.1からQtバージョン5.6.0を使用しています。私は4つの側面とその頂点をドラッグする能力を持っている形状を描画します。私は矢印キーで形状の頂点を移動したい。私はこのコードを使用しますが、動作しません。 Point.qml：

Item { 
id: root 

signal dragged() 
property alias color :point.color 
Rectangle { 
    id:point 
    anchors.centerIn: parent 
    width: 20 
    height: 20 

    opacity: 0.2 

    MouseArea { 
     anchors.fill: parent 
     drag.target: root 
     onPositionChanged: { 
      if(drag.active) { 
       dragged() 
      } 
     } 
     onClicked: point.focus=true; 
    } 

    //  Keys.onPressed: { 
    //   console.log("move"); 
    //   if (event.key === Qt.Key_Left) { 
    //    console.log("move left"); 
    //    event.accepted = true; 
    //    point.x-=1; 
    //   } 
    //  } 
    //  Keys.onRightPressed: { 
    //   console.log("move"); 
    //   point.x+=1; 
    //  } 

    //  Keys.onLeftPressed: { 
    //   console.log("move"); 
    //   point.x-=1; 
    //  } 
    Keys.onPressed: { 
     switch(event.key) { 
     case Qt.Key_Left: point.x-=1; 
      break; 
     case Qt.Key_Right: point.x+=1; 
      break; 
     case Qt.Key_Up: point.y-=1; 
      break; 
     case Qt.Key_Down: point.y+=1; 
      break; 
     } 
    } 

    focus: true; 
}} 

main.qml：

Point { 
    id: pointA 
    x: 50 
    y: 50 
} 

Point { 
    id: pointB 
    x: 250 
    y: 50 
} 

Point { 
    id: pointC 
    x: 250 
    y: 250 
} 

Point { 
    id: pointD 
    x: 50 
    y: 250 
} 


Item { 
    anchors.fill: parent 

    Canvas { 
     id: canvas 
     anchors.fill: parent 
     onPaint: { 
      var ctx = canvas.getContext('2d'); 
      ctx.moveTo(pointA.x, pointA.y); 
      ctx.lineTo(pointB.x, pointB.y); 
      ctx.lineTo(pointC.x, pointC.y); 
      ctx.lineTo(pointD.x, pointD.y); 
      ctx.lineTo(pointA.x, pointA.y); 
      ctx.stroke(); 
     } 
     Component.onCompleted: { 
      pointA.dragged.connect(repaint) 
      pointB.dragged.connect(repaint) 
      pointC.dragged.connect(repaint) 
      pointD.dragged.connect(repaint) 
     } 

     function repaint() { 
      var ctx = getContext("2d"); 
      ctx.clearRect(0, 0, canvas.width, canvas.height); 
      ctx.beginPath(); 
      requestPaint() 
     } 
    } 
} 

更新： main.qml：

PhotoPreview { 
          id : photoPreview 
          anchors.fill : parent 
          //focus:true //visible 
          visible: capture 
         } 

photopreview.qml：

Item { 
    id:mywin  
    property real defaultSize:mywin.width 
property var currentFrame: undefined 
property real surfaceViewportRatio: 1.5 
focus: true  
ScrollView { 
    anchors.fill: parent 
    flickableItem.interactive: true 
    frameVisible: true 
    highlightOnFocus: true   
    Flickable { 
     id: flick 
     anchors.fill: parent 
     contentWidth: parent.width 
     contentHeight: parent.height 
     property alias source :image.source 
     signal closed 
     Rectangle { 
      id: photoFrame 
      width: parent.width 
      height: parent.height 
      color:"transparent" 
      scale:defaultSize/parent.width 
      Behavior on scale { NumberAnimation { duration: 200 } } 
      Behavior on x { NumberAnimation { duration: 200 } } 
      Behavior on y { NumberAnimation { duration: 200 } }     
      smooth: true 
      antialiasing: true     
      Image { 
       id:image 
       anchors.fill: parent 
       fillMode: Image.PreserveAspectFit 
       smooth: true 
      } 
      PinchArea { 
       anchors.fill: parent 
       pinch.target: photoFrame 
       pinch.minimumRotation: -360 
       pinch.maximumRotation: 360 
       pinch.minimumScale: 0.1 
       pinch.maximumScale: 10 
       pinch.dragAxis: Pinch.XAndYAxis 
       property real zRestore: 0 
       onSmartZoom: { 
        if (pinch.scale > 0) { 
         photoFrame.rotation = 0; 
         photoFrame.scale = Math.min(mywin.width, mywin.height)/Math.max(image.sourceSize.width, image.sourceSize.height) * 0.85 
         photoFrame.x = flick.contentX + (flick.width - photoFrame.width)/2 
         photoFrame.y = flick.contentY + (flick.height - photoFrame.height)/2 
         zRestore = photoFrame.z 
         photoFrame.z = ++mywin.highestZ; 
        } else { 
         photoFrame.rotation = pinch.previousAngle 
         photoFrame.scale = pinch.previousScale 
         photoFrame.x = pinch.previousCenter.x - photoFrame.width/2 
         photoFrame.y = pinch.previousCenter.y - photoFrame.height/2 
         photoFrame.z = zRestore 
         --mywin.highestZ 
        } 
       }      
       MouseArea { 
        id: dragArea 
        hoverEnabled: true 
        anchors.fill: parent 
        drag.target: photoFrame 
        scrollGestureEnabled: false // 2-finger-flick gesture should pass through to the Flickable 
        onPressed: { 
         photoFrame.z = ++mywin.highestZ; 
        }       
        onWheel: { 
         if (wheel.modifiers & Qt.ControlModifier) { 
          photoFrame.rotation += wheel.angleDelta.y/120 * 5; 
          if (Math.abs(photoFrame.rotation) < 4) 
           photoFrame.rotation = 0; 
         } else { 
          photoFrame.rotation += wheel.angleDelta.x/120; 
          if (Math.abs(photoFrame.rotation) < 0.6) 
           photoFrame.rotation = 0; 
          var scaleBefore = photoFrame.scale; 
          photoFrame.scale += photoFrame.scale * wheel.angleDelta.y/120/10; 
         } 
        } 
       } 
      }     
      Point { 
       id: pointA 
       x: image.width/4 
       y: image.height/4 
       color: "blue" 
      } 
      Point { 
       id: pointB 
       x: image.width/2 
       y: image.height/2 
       color: "blue"      
      }     
      Point { 
       id: pointD 
       x: image.width/4 
       y: image.height/2 
       color: "red" 
      }     
      Point { 
       id: pointC 
       x: image.width/2 
       y: image.height/4 
       color: "red"      
      }     
      Item { 
       anchors.fill: parent      
       Canvas { 
        id: canvas 
        anchors.fill: parent       
        onPaint: { 
         //... 
        } 
        Component.onCompleted: { 
         //... 
        }       
        function repaint() { 
         //.. 
        } 
       } 
      } 
     } 
    } 
}} 

Answer 1

あなたはfocus:trueforward itにを持っている必要がありFocusScopeを継承ScrollViewを使用しています。 代わりに、focus〜PhotoPreviewを設定しています。これは、フォーカスされていないと思われる普通のItemです。

focus:visibleを単純に削除し、ScrollViewに設定する必要があります。

この冗長性を取り除いて、をPhotoPreviewルート項目とし、すべてのプロパティと信号を残しておきます。

Answer 2

で0キーイベントハンドラは、pointのx、yを変更しようとしますが、pointは長方形ですanchors.centerIn: parentです。キーイベントハンドラではなく、yはroot Xを変更する必要があります。キーボードイベントがトリガされたときに

//in Point.qml 
case Qt.Key_Left: 
    root.x-=1; 
    break; 

Pointが今の位置を変更します。次に、Pointは、main.qmlのCanvasに再塗りを通知する必要があります。 Pointを変更した後dragged信号を発することができる、それはX、Yです：

//in Point.qml 
Keys.onPressed: { 
    switch(event.key) { 
    case Qt.Key_Left: 
     root.x-=1; 
     dragged(); 
     break; 
    case Qt.Key_Right: 
     root.x+=1; 
     dragged(); 
     break; 
    case Qt.Key_Up: 
     root.y-=1; 
     dragged(); 
     break; 
    case Qt.Key_Down: 
     root.y+=1; 
     dragged(); 
     break; 
    } 
}