Web&QML笔记-qml获取canvas中元素是否被按下

以前出了几个用QWebView，获取html前端数据的博文，

使用QWebElement可以直接获取html中元素的填充的值。

在此不在多提。这个是纯QML获取canvas中元素是否被按下的思路。

 

这里先演示下

程序运行截图如下：

点击按钮生成两个元素：

点一下第一个红色矩形元素：

点一下第二个红色矩形元素：

其原理就是qml按钮调用web前端函数，构造出2个canvas矩形。

然后web前端还提供了一个函数，这个函数用于查询这个按钮是否被按下，下面这个例子是使用map存储id以及bool，判断是否被按下。Qml中又给计时器去不停的调用这个函数，从而获取按钮是否被按下。

 

其qml源码如下：

import QtQuick 2.6
import QtQuick.Window 2.2
import QtWebEngine 1.3
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    WebEngineView{

        id: web;
        anchors.fill: parent;
        url: "http://127.0.0.1:8081/";
    }

    Button{

        onClicked: {

            var functionStr = "window.mainPage.createNewBtn(10001, 100, 100)";
            web.runJavaScript(functionStr, function(result){

                console.log(">" + "window.mainPage.createNewBtn(10001, 100, 100) over");
            });

            functionStr = "window.mainPage.createNewBtn(10003, 400, 400)";
            web.runJavaScript(functionStr, function(result){

                console.log(">" + "window.mainPage.createNewBtn(10003, 400, 400) over");
            })
        }
    }

    MessageDialog {
         id: messageDialog
     }

    //使用定时器来判断界面按钮是否按下了
    Timer{

        interval: 500;
        repeat: true;
        running: true;

        onTriggered: {

            var functionStr1 = "window.mainPage.getClickedStatus(10001)";
            var functionStr2 = "window.mainPage.getClickedStatus(10003)";
            web.runJavaScript(functionStr1, function(result){

                //console.log(">" + String(result));
                if(String(result).toString().match("true")){

                    messageDialog.title = "tip";
                    messageDialog.text = "window.mainPage.getClickedStatus(10001)";
                    messageDialog.visible = true;
                }
            });

            web.runJavaScript(functionStr2, function(result){

                //console.log(">" + String(result));
                if(String(result).toString().match("true")){

                    messageDialog.title = "tip";
                    messageDialog.text = "window.mainPage.getClickedStatus(10003)";
                    messageDialog.visible = true;
                }
            })
        }
    }
}

前端源码如下：

关键代码：

脚本源码：

;

import * as Two from "JS/two";
import * as $ from "JS/jquery";


let isPressed = false;
let originalPositionX = 0;
let originalPositionY = 0;
let two;
let mouse;

export function drawGraphic(){

  let elem = document.getElementById("draw-shapes");
  let params = {

    fullscreen: true,
    autostart: true
  }

  two = new Two(params).appendTo(elem);
  mouse = new Two.ZUI(two.scene);
  mouse.addLimits(0.1, 10);

  let $stage = $(two.renderer.domElement);
  $stage.bind('mousewheel wheel', function(event){

    let e = event.originalEvent;
    e.stopPropagation();
    e.preventDefault();

    let dy = (e.wheelDeltaY || -e.deltaY) / 1000;
    mouse.zoomBy(dy, e.clientX, e.clientY);
  });

  $stage.bind('mouseup', function(event){

    isPressed = false;
  });
  $stage.bind('mouseout', function(event){

    isPressed = false;
  })

  $stage.bind('mousemove', function(event){

    if(isPressed){

      let boolX = event.clientX - originalPositionX;
      let boolY = event.clientY - originalPositionY;
      mouse.graphicMove(boolX, boolY);
      originalPositionX = event.clientX;
      originalPositionY = event.clientY;
    }
  });

  $stage.bind('mousedown', function(event){

    isPressed = true;
    originalPositionX = event.clientX;
    originalPositionY = event.clientY;
  });

  //移动端触碰开始
  $stage.bind('touchstart', function (event){

    originalPositionX = event.changedTouches[0].pageX;
    originalPositionY = event.changedTouches[0].pageY;
    isPressed = true;
  });
  $stage.bind('touchend', function(event){

    isPressed = false;
  });
  $stage.bind('touchmove', function(event){

    let currentX = event.changedTouches[0].pageX;
    let currentY = event.changedTouches[0].pageY;

    let boolX = currentX - originalPositionX;
    let boolY = currentY - originalPositionY;

    mouse.graphicMove(boolX, boolY);
    originalPositionX = currentX;
    originalPositionY = currentY;
  });

  /*
  //移动端触碰结束
  let text = two.makeText("Hello", 0, 0);

  text.size = 20;
  text.fill = "red";
  text.rotation = 90 * Math.PI / 180;

  //查询
  let corona = makeTriangle(two, 100);
  corona.noStroke();
  corona.fill = "red";
  corona.translation.set(200, 200);

  let tip = makeTip(two, "错误", 'rgb(255, 255, 255)', 90);
  tip.translation.set(500, 500);


  let ellipse = two.makeEllipse(800, 800, 200, 300);
  ellipse.linewidth = 5;
  ellipse.stroke = "rgb(0, 128, 255)";
  */


}

function makeTriangle(two, size) {

  let tri = two.makePath(-size / 2, 0, size / 2, 0, 0, size);
  return tri;
}

function makeTip(two, text, textColor, rotation){

  let group = two.makeGroup();
  let len = 100;
  let tip = two.makePath(-len / 2, -len / 3, -len / 2, -len, len / 2, -len, len / 2, -len / 3 , 0, 0 );
  tip.fill = 'red';
  tip.rotation = rotation * Math.PI / 180;
  group.add(tip);

  let txt = two.makeText(text, 0, -len / 1.8);
  txt.size = 20;
  txt.fill = textColor;
  group.add(txt);
  group.noStroke();

  //连文字一起旋转
  //group.rotation = rotation * Math.PI / 180;

  return group;
}

let map = new Map();

export function createBtn(id, x, y) {

  let rect = two.makeRectangle(x, y, 200, 200);
  rect.noStroke();
  rect.fill = "red";
  rect.myId = id;

  //此步骤不能少，否则
  two.update();
  map.set(id.toString(), false);

  $(rect._renderer.elem)
    .click(function (e){

      map.set(rect.myId.toString(), true);
  });
}

export function getStatus(id){

  let result = map.get(id.toString());
  if(result != null && result != false){

    map.delete(id.toString());
  }

  return result;
}

关键代码如下：