关键词搜索

源码搜索 ×
×

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

发布2020-07-08浏览1075次

详情内容

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

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

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

 

这里先演示下

程序运行截图如下：

点击按钮生成两个元素：

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

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

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

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

 

其qml源码如下：

  1. import QtQuick 2.6
  2. import QtQuick.Window 2.2
  3. import QtWebEngine 1.3
  4. import QtQuick.Controls 1.4
  5. import QtQuick.Dialogs 1.2
  6.  
  7. Window {
  8.     visible: true
  9.     width: 640
  10.     height: 480
  11.     title: qsTr("Hello World")
  12.  
  13.     WebEngineView{
  14.  
  15.         id: web;
  16.         anchors.fill: parent;
  17.         url: "http://127.0.0.1:8081/";
  18.     }
  19.  
  20.     Button{
  21.  
  22.         onClicked: {
  23.  
  24.             var functionStr = "window.mainPage.createNewBtn(10001, 100, 100)";
  25.             web.runJavaScript(functionStr, function(result){
  26.  
  27.                 console.log(">" + "window.mainPage.createNewBtn(10001, 100, 100) over");
  28.             });
  29.  
  30.             functionStr = "window.mainPage.createNewBtn(10003, 400, 400)";
  31.             web.runJavaScript(functionStr, function(result){
  32.  
  33.                 console.log(">" + "window.mainPage.createNewBtn(10003, 400, 400) over");
  34.             })
  35.         }
  36.     }
  37.  
  38.     MessageDialog {
  39.          id: messageDialog
  40.      }
  41.  
  42.     //使用定时器来判断界面按钮是否按下了
  43.     Timer{
  44.  
  45.         interval: 500;
  46.         repeat: true;
  47.         running: true;
  48.  
  49.         onTriggered: {
  50.  
  51.             var functionStr1 = "window.mainPage.getClickedStatus(10001)";
  52.             var functionStr2 = "window.mainPage.getClickedStatus(10003)";
  53.             web.runJavaScript(functionStr1, function(result){
  54.  
  55.                 //console.log(">" + String(result));
  56.                 if(String(result).toString().match("true")){
  57.  
  58.                     messageDialog.title = "tip";
  59.                     messageDialog.text = "window.mainPage.getClickedStatus(10001)";
  60.                     messageDialog.visible = true;
  61.                 }
  62.             });
  63.  
  64.             web.runJavaScript(functionStr2, function(result){
  65.  
  66.                 //console.log(">" + String(result));
  67.                 if(String(result).toString().match("true")){
  68.  
  69.                     messageDialog.title = "tip";
  70.                     messageDialog.text = "window.mainPage.getClickedStatus(10003)";
  71.                     messageDialog.visible = true;
  72.                 }
  73.             })
  74.         }
  75.     }
  76. }

前端源码如下：

  1. <template>
  2.   <div>
  3.     <div id="draw-shapes"></div>
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8.  
  9.   import "JS/two"
  10.   import "JS/mouse"
  11.   import {drawGraphic, createBtn, getStatus} from "JS/draw";
  12.  
  13.  
  14.   export default {
  15.   name: 'MainPage',
  16.   mounted(){
  17.     window.mainPage = this;
  18.     drawGraphic();
  19.   },
  20.   methods:{
  21.  
  22.     createNewBtn(id, x, y){
  23.  
  24.       createBtn(id, x, y);
  25.       return "over";
  26.     },
  27.  
  28.     getClickedStatus(id){
  29.  
  30.       return getStatus(id);
  31.     }
  32.   },
  33.   data () {
  34.     return {
  35.       msg: 'Welcome to Your Vue.js App'
  36.     }
  37.   }
  38. }
  39. </script>
  40.  
  41. <style scoped>
  42.  
  43. </style>

关键代码：

脚本源码：

  1. ;
  2.  
  3. import * as Two from "JS/two";
  4. import * as $ from "JS/jquery";
  5.  
  6.  
  7. let isPressed = false;
  8. let originalPositionX = 0;
  9. let originalPositionY = 0;
  10. let two;
  11. let mouse;
  12.  
  13. export function drawGraphic(){
  14.  
  15.   let elem = document.getElementById("draw-shapes");
  16.   let params = {
  17.  
  18.     fullscreen: true,
  19.     autostart: true
  20.   }
  21.  
  22.   two = new Two(params).appendTo(elem);
  23.   mouse = new Two.ZUI(two.scene);
  24.   mouse.addLimits(0.1, 10);
  25.  
  26.   let $stage = $(two.renderer.domElement);
  27.   $stage.bind('mousewheel wheel', function(event){
  28.  
  29.     let e = event.originalEvent;
  30.     e.stopPropagation();
  31.     e.preventDefault();
  32.  
  33.     let dy = (e.wheelDeltaY || -e.deltaY) / 1000;
  34.     mouse.zoomBy(dy, e.clientX, e.clientY);
  35.   });
  36.  
  37.   $stage.bind('mouseup', function(event){
  38.  
  39.     isPressed = false;
  40.   });
  41.   $stage.bind('mouseout', function(event){
  42.  
  43.     isPressed = false;
  44.   })
  45.  
  46.   $stage.bind('mousemove', function(event){
  47.  
  48.     if(isPressed){
  49.  
  50.       let boolX = event.clientX - originalPositionX;
  51.       let boolY = event.clientY - originalPositionY;
  52.       mouse.graphicMove(boolX, boolY);
  53.       originalPositionX = event.clientX;
  54.       originalPositionY = event.clientY;
  55.     }
  56.   });
  57.  
  58.   $stage.bind('mousedown', function(event){
  59.  
  60.     isPressed = true;
  61.     originalPositionX = event.clientX;
  62.     originalPositionY = event.clientY;
  63.   });
  64.  
  65.   //移动端触碰开始
  66.   $stage.bind('touchstart', function (event){
  67.  
  68.     originalPositionX = event.changedTouches[0].pageX;
  69.     originalPositionY = event.changedTouches[0].pageY;
  70.     isPressed = true;
  71.   });
  72.   $stage.bind('touchend', function(event){
  73.  
  74.     isPressed = false;
  75.   });
  76.   $stage.bind('touchmove', function(event){
  77.  
  78.     let currentX = event.changedTouches[0].pageX;
  79.     let currentY = event.changedTouches[0].pageY;
  80.  
  81.     let boolX = currentX - originalPositionX;
  82.     let boolY = currentY - originalPositionY;
  83.  
  84.     mouse.graphicMove(boolX, boolY);
  85.     originalPositionX = currentX;
  86.     originalPositionY = currentY;
  87.   });
  88.  
  89.   /*
  90.   //移动端触碰结束
  91.   let text = two.makeText("Hello", 0, 0);
  93.   text.size = 20;
  94.   text.fill = "red";
  95.   text.rotation = 90 * Math.PI / 180;
  97.   //查询
  98.   let corona = makeTriangle(two, 100);
  99.   corona.noStroke();
  100.   corona.fill = "red";
  101.   corona.translation.set(200, 200);
  103.   let tip = makeTip(two, "错误", 'rgb(255, 255, 255)', 90);
  104.   tip.translation.set(500, 500);
  107.   let ellipse = two.makeEllipse(800, 800, 200, 300);
  108.   ellipse.linewidth = 5;
  109.   ellipse.stroke = "rgb(0, 128, 255)";
  110.   */
  111.  
  112.  
  113. }
  114.  
  115. function makeTriangle(two, size) {
  116.  
  117.   let tri = two.makePath(-size / 2, 0, size / 2, 0, 0, size);
  118.   return tri;
  119. }
  120.  
  121. function makeTip(two, text, textColor, rotation){
  122.  
  123.   let group = two.makeGroup();
  124.   let len = 100;
  125.   let tip = two.makePath(-len / 2, -len / 3, -len / 2, -len, len / 2, -len, len / 2, -len / 3 , 0, 0 );
  126.   tip.fill = 'red';
  127.   tip.rotation = rotation * Math.PI / 180;
  128.   group.add(tip);
  129.  
  130.   let txt = two.makeText(text, 0, -len / 1.8);
  131.   txt.size = 20;
  132.   txt.fill = textColor;
  133.   group.add(txt);
  134.   group.noStroke();
  135.  
  136.   //连文字一起旋转
  137.   //group.rotation = rotation * Math.PI / 180;
  138.  
  139.   return group;
  140. }
  141.  
  142. let map = new Map();
  143.  
  144. export function createBtn(id, x, y) {
  145.  
  146.   let rect = two.makeRectangle(x, y, 200, 200);
  147.   rect.noStroke();
  148.   rect.fill = "red";
  149.   rect.myId = id;
  150.  
  151.   //此步骤不能少，否则
  152.   two.update();
  153.   map.set(id.toString(), false);
  154.  
  155.   $(rect._renderer.elem)
  156.     .click(function (e){
  157.  
  158.       map.set(rect.myId.toString(), true);
  159.   });
  160. }
  161.  
  162. export function getStatus(id){
  163.  
  164.   let result = map.get(id.toString());
  165.   if(result != null && result != false){
  166.  
  167.     map.delete(id.toString());
  168.   }
  169.  
  170.   return result;
  171. }

关键代码如下：

 

 

 

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载