WebQML笔记-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.2Window {visible: truewidth: 640height: 480title: 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;}})}}
}

前端源码如下：

<template><div><div id="draw-shapes"></div></div>
</template><script>import "JS/two"import "JS/mouse"import {drawGraphic, createBtn, getStatus} from "JS/draw";export default {name: 'MainPage',mounted(){window.mainPage = this;drawGraphic();},methods:{createNewBtn(id, x, y){createBtn(id, x, y);return "over";},getClickedStatus(id){return getStatus(id);}},data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><style scoped></style>

关键代码：

脚本源码：

;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;
}

关键代码如下：

WebQML笔记-qml获取canvas中元素是否被按下相关推荐

获取数组中元素值为偶数的累加和与元素值为奇数的累加和，并计算他们之间的差值
/*** 1.获取数组中元素值为偶数的累加和与元素值为奇数的累加和,并计算他们之间的差值* 1.定义int getNum(int[] arr)静态方法,该方法要求完成* 1.1 获取指定数组arr中元 ...
scala 获取数组中元素_从Scala中的元素列表中获取随机元素
scala 获取数组中元素 We can access a random element from a list in Scala using the random variable. To use ...
获取webbrowser中元素的屏幕坐标
/// <summary>/// 获取webbrowser中html元素的屏幕坐标/// </summary>/// <param name="webBrows ...
Java创建数组的三种方式（以及length方法是否能获取数组中元素的个数）
Java创建数组的三种方法 import java.util.Arrays; public class Sum { public static void main(String[] args){ in ...
python获取列表中元素的索引
python中,列表一般是没有索引,不能像pandas里面的序列和dataframe一样,方便的使用索引.但是如果想知道某一个元素在列表中的位置,就需要使用index比如想要知道一个列表中,哪一个元 ...
java list 获取索引_java – 获取arrayList中元素的索引
我试图在arrayList minuteList中获得466的索引 [288, 318, 346, 376, 406, 436, 466, 1006, 1036, 1066, 1096, 1126, ...
C++|Linux工作笔记-C++获取Linux中shell命令结果
目录基本概念代码与实例基本概念这里首先介绍一条Linux函数: ps -ef | awk '{print $2,$8,$9,$10}' 这个可以当前Linux系统运行的进程另外一个知识点: ...
python 提取列表元素_Python如何获取列表中元素的索引,python,获得,某个,index
由前面<python判断字符串中是否包含子字符串str(这个很重要,经常被问到,会经常使用)index() find()>( https://blog.csdn.net/jiongta94 ...
python获取当前网页元素_python – 如何获取webdriver中元素的当前内容
我相信预言是在正确的轨道.这取决于它是什么样的元素.您需要对输入元素使用element.get_attribute('value'),并返回元素的文本节点. 您可以使用element.tag_name ...

WebQML笔记-qml获取canvas中元素是否被按下

WebQML笔记-qml获取canvas中元素是否被按下相关推荐

最新文章

热门文章