electron渲染进程拖拽

2024-11-02

使用 Electron 构建桌面应用（拖动控制篇）

使用 Electron 构建桌面应用(拖动控制篇) 当窗口被定义了大小,我们也就是在自定义这个窗口,使得它不可拉伸没有框架,让它看起来就像一个真正的声效器浮在桌面上. 现在问题来了 – 要如何移动或者关闭一个没有标题栏的窗口. 很快我就会说到自定义窗口(和应用)的关闭动作,还会谈到如何在主进程和渲染器进程中通信.不过现在让我们先把目光聚焦到“拖拽效果”上.你可以在 app/css 目录下找到 index.css 文件: html, body { ... -webkit-app-region: d

electron关于无边框窗口无法拖拽移动以及点击事件失效的问题

为了使窗口无边框,使得在某些时候让项目看起来更美观,所以在创建窗口的时候通过设置 frame 属性的值为 false 来创建无边框窗口.但是无边框窗口会产生无法移动的问题,对于这个问题我们可以在渲染进程中通过编辑 css 文件来解决. 设置 -webkit-app-region: drag 把整个文档都变成了一个可拖拽的对象: body,html { -webkit-app-region: drag; } 现在拖动的问题解决了,但是原来所有的点击事件却失效了,为此我们通过设置部分的这个属性值为

electron 主进程，和渲染进程的通信

ipcMain https://electronjs.org/docs/api/ipc-main 当在主进程中使用时,它处理从渲染器进程(网页)发送出来的异步和同步信息, 当然也有可能从主进程向渲染进程发送消息 ipcRenderer https://electronjs.org/docs/api/ipc-renderer 使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主进程. 也可以接收主进程回复的消息使用自定义的最小化,最大化,关闭按钮渲染进程 html 片段

Android 自定义可拖拽View，界面渲染刷新后不会自动回到起始位置

以自定义ImageView为例: /** * 可拖拽ImageView * Created by admin on 2017/2/21. */ public class FloatingImageView extends ImageView{ public FloatingImageView(Context context) { super(context); } public FloatingImageView(Context context, AttributeSet attrs) { su

使用electron进行原生应用的打包(2)---主进程与渲染进程之间的通信

上一篇讲了使用electron进行打包的配置相关文件,这篇主要讲electron中很重要的通信方式. 首先解释一个概念: electron打包的应用包含两个部分 electron的环境(node),也就是主进程. web渲染环境,副进程. 这两个环境之间是相互隔离的,无法直接进行数据通信,所以有了这篇文章. 三个角色: ipcRender ipcMain webContents ipcRenderer用于渲染进程 ipcRenderer.on(channel, listener) --> cha

一款多功能的移动端滚动选择器，支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..

https://github.com/onlyhom/mobileSelect.js/blob/master/docs/README-CN.md mobileSelect.js 一款多功能的移动端滚动选择器,支持单选到多选.支持多级级联.提供自定义回调函数.提供update函数二次渲染.重定位函数.兼容pc端拖拽等等.. [English documents] 特性原生js移动端选择控件,不依赖任何库可传入普通数组或者json数组可根据传入的参数长度,自动渲染出对应的列数,支持单项到多项选

研究Electron主进程、渲染进程、webview之间的通讯

背景由于某个Electron应用,需要主进程.渲染进程.webview之间能够互相通讯. 不过因为Electron仅提供了主进程与渲染进程的通讯,没有渲染进程之间或渲染进程与webview之间通讯的办法,所以只能寻找其他方案来解决. 研究一:ipcMain/ipcRenderer Electron主进程与渲染进程的通讯,就是用ipcMain/ipcRenderer这两个对象. // 在主进程中. const { ipcMain } = require('electron') ipcMain.o

Electron结合React，在渲染进程中使用 node 模块

Electron结合React,在渲染进程中使用 node 模块问题将create-react-app与electron集成在了一个项目中.但是在React中无法使用electron.当在React中使用require('electron')时就会报TypeError: fs.existsSync is not a function的错误.因为React中无法使用Node.js的模块. 解决方法1 利用window.require引入 const electron = window.requ

CSharpGL(21)用鼠标拾取、拖拽VBO图元内的点、线或本身

CSharpGL(21)用鼠标拾取.拖拽VBO图元内的点.线或本身效果图以最常见的三角形网格(用GL_TRIANGLES方式进行渲染)为例. 在拾取模式为GeometryType.Point时,你可以拾取单个的顶点. 在拾取模式为GeometryType.Line时,你可以拾取任意一个三角形里的任意一条线.即同时拾取此线段的两个顶点. 在拾取模式为GeometryType.Triangle时,你可以拾取任意一个三角形.即同时拾取此三角形的三个顶点. 实际上,CSharpGL实现了在所有渲染模

再谈React.js实现原生js拖拽效果

前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧一.不要直接操作dom元素 react中使用了虚拟dom的概念,目地就是要尽量避免直接操作dom元素,所以我们在对dom元素进行操作的时候需要注意,我之前为了获取form的参数就直接用了var dragBox=document.getElementById('form')去找dom,但是其实记录from的初始位置,可以在其子组件更新父组件参数的时候调用.即在MyF

让Web页面中的编辑器支持黏贴或直接拖拽来添加图片

基本原理是将剪贴板中的图片二进制数据转为Base64编码代码: <html> <head> </head> <body> <script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.js"> </script> <div id="edit" contenteditable="true" style="wid

canvas 拖拽实现

Canvas 依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏,其中的许多对象会被频繁重绘 SVG 不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 1 canvas:不支持事件处理,所以必须有一部分逻辑来做来做模拟事件和dom对象的作用.一般会使用一个基本的canvas库 2 canvas: 弱的文本渲染能力(c

HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

可拖动dragable属性之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像是可以拖动的,不用再写代码即可拖动.如果想让其他元素标签也可以拖动,那么只有HTML5能实现了.HTML5为所有HTML元素规定了dragable属性,表示元素是否可以拖动.链接和图像的标签中自动将dragable属性自动被设置成true,其他元素的dragable属性的默认值是false. 支持d

WPF.UIShell UIFramework之自定义窗口的深度技术 - 模态闪动(Blink)、窗口四边拖拽支持（WmNCHitTest）、自定义最大化位置和大小（WmGetMinMaxInfo）

无论是在工作和学习中使用WPF时,我们通常都会接触到CustomControl,今天我们就CustomWindow之后的一些边角技术进行探讨和剖析. 窗口(对话框)模态闪动(Blink) 自定义窗口的四边拖拽支持自定义窗口最大化(位置/大小) 童鞋们在WPF开发过程中是否觉得默认的Style太丑,或者是由Balabala的一些原因,使你觉得重写一个“高大上”的Window来符合项目的UI要求(小明:“我们使用Telerik” 老师:“什么?你说你们使用第三方UI框架?滚出去!”)经过半天的努

React Editor 应用编辑器(1) - 拖拽功能剖析

这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页文档流布局,绝对定位同时支持对插入的任何 React 组件都可以直接作为编辑元素拖拽到页面中兼容 React-Native 的 web 组件可以让它生成 android 和 ios 原生页面拥有 Gaea-Preview 套件,传入 Gaea-Editor 生成的 json,可以立刻生成页面拥有 Ga

基于WebForm+EasyUI的业务管理系统形成之旅 -- 首页Portal界面拖拽(Ⅵ)

上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 构建Web界面>,主要介绍系统界面布局.导出数据等. 本篇将介绍首页Portal界面拖拽. 一.首页Portal界面拖拽效果效果对比,如下图所示. 具体实现代码 //在一起的用,分割,不在一起的用:分割 var local = 'p1,p4,p2:p3'; if ($.cookie("panelStates")) { local = $.cookie("panelStates"); }

理解事件捕获。在限制范围内拖拽div+吸附+事件捕获

一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二.一步步的实现这个拖拽过程的几个要求 (一)拖拽起来里面的边框是表示页面哦(我们的屏幕所能看到的东东). 获取移动距离的思路: 记录鼠标按下和鼠标抬起两次的坐标,然后相减,再加上div跟边缘之间的间距.就得到移动距离. 之前我也在这里困惑了,不明白为什么还要再加上offsetLeft.原因就是cl

html5 文件拖拽上传

本文首先发表在码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网上找来改的,只是踩了几个坑之后就想把过程记录下来. 功能实现下面主要介绍从浏览器外拖拽文件到浏览器进行上传的实现. 首先会介绍一些必须的基础. 拖拽事件拖拽事件有下面这些: dragstart:当用户开始拖动对象时触发. dragenter: 当鼠标第一次经过目标元素,且有拖动发生时触发.此事件

H5拖拽构造拖拽及缩放 pdf展示

前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽思路:H5拖拽及构造函数实现拖拽及缩放要点:1.需要设置拖拽元素属性 draggable="true" 2.可拖拽的元素设置ondragstart获取数据 3.对可放置拖拽元素的设置ondragover函数默认地,无法将数据/元素放置到其他元素中.如果需要设置允许放置,我们必须阻止对

【转】IE沙箱拖拽安全策略解析

https://xlab.tencent.com/cn/2015/12/17/ie-sandbox-drop-security-policy/ IE沙箱逃逸是IE浏览器安全研究的一个重要课题,其中有一类漏洞会借助ElevationPolicy设置中的白名单程序的缺陷来完成沙箱逃逸.IE在注册表中有一个和ElevationPolicy类似的名为DragDrop策略设置,这引起了我们的注意.在本文中,笔者将以一个攻击者的视角,尝试各种途径来突破IE沙箱的这一安全策略,通过分析所遇到的障碍,达到对IE

拖拽 ‘vue-grid-layout’ 插件了解下

我接触到vue-grid-layout是通过我们公司的项目,感觉还是比较简单上手的,大概看了有1个小时吧,我是个行动派,就是觉得实践出真知,但是记性也不太好,有时候自己踩过的坑会忘记,会改但是会忘记原因…我对自己这点也很不满,但是不知记忆力不好从何改起,此处省略1万字…(捂脸表情自己脑补),不多说废话了,想用需要先安装下依赖,“npm install vue-gride-layout --dev-sav”也可以自己在依赖中设置下版本,我是基于“^2.1.13”版本,安装好后,直接在您需要的组件使

electron渲染进程拖拽

热门专题