首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Kinetic JS - 如何获取组成员的坐标(拖动组后)?

关于Kinetic JS,它是一个开源的JavaScript库,用于开发HTML5的2D动画和交互式应用程序。在Kinetic JS中,可以使用组(Group)来组织和管理多个形状和图形。要获取组成员的坐标,可以使用getAbsolutePosition()方法。

以下是一个简单的示例,说明如何在Kinetic JS中获取组成员的坐标:

代码语言:javascript
复制
// 创建舞台
var stage = new Kinetic.Stage({
  container: 'container',
  width: 578,
  height: 200
});

// 创建层
var layer = new Kinetic.Layer();

// 创建组
var group = new Kinetic.Group({
  x: 100,
  y: 50,
  draggable: true
});

// 创建形状
var circle = new Kinetic.Circle({
  x: 50,
  y: 50,
  radius: 30,
  fill: 'red'
});

// 将形状添加到组中
group.add(circle);

// 将组添加到层中
layer.add(group);

// 将层添加到舞台中
stage.add(layer);

// 获取组成员的坐标
group.on('dragend', function() {
  var absolutePosition = group.getAbsolutePosition();
  var x = absolutePosition.x;
  var y = absolutePosition.y;
  console.log('Group member coordinates: x=' + x + ', y=' + y);
});

在这个示例中,我们创建了一个舞台、一个层、一个组和一个圆形。我们将圆形添加到组中,并将组添加到层中。然后,我们使用getAbsolutePosition()方法获取组成员的坐标。当组成员被拖动时,我们将在控制台中输出它们的坐标。

注意:Kinetic JS已经不再维护,建议使用其他更现代的库,如p5.js、D3.js等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

新版滑动验证码

下图是B站的登录验证码,便是采用了极验的滑动验证码,一起来看看如何破解吧! ?...将任务拆分有助于我们解决问题,解决这个滑动验证码我们可以分为这么两个步骤: 1)识别图片缺口 2)模拟拖动滑块 那么就一步一步来吧~ 图片缺口识别 可以看到的是缺口图的颜色与周围有显著不同,我们只需要拿到不含缺口的原图进行对比就能够找到这个缺口的坐标...知道如何获得这两张图片之后,我们可以通过get_geetest_image函数来获取滑动验证码的图片,具体是用了 Selenium 工具选取图片元素,然后得到其所在位置以及大小,随后获取整个网页的截图,...图片获取之后,来对比图片各个像素通道的差异来获取缺口的位置就行。我们宽泛的认为,像素相差在一定范围内视为相同,像素相差大于阈值视为发现缺口,便由此得到了缺口的坐标信息。...我们采用匀加速和匀减速的方法,方便套用物理公式。模拟前4/5路程为匀加速路程,后1/5路程是匀减速路程,t是计算的时间间隔。

4.7K31

手写原生代码专题 | 三角板 Loading 效果和骨架屏图片卡片预加载效果(三)

的思路如下,最重要的是要理解如何用 Div 实现三角形,具体的实现思路如下: 首先定义动画容器 kinetic 的宽和高 80px,让其垂直水平居中 然后使用 before 和 after 伪类,绘制两个三角形...,如果你想获取源码,请查看文末获取源码的方式进行获取。...了解完骨架屏后,我们先实现一个图片卡片预加载的轮廓效果,先通过这个简单示例,简单的了解下是如何实现的,原理理解后,我们就明白如何实现一个骨架屏了,具体的效果展示如下: ?...首先我们先用 HTML和CSS 创建卡片的基础轮廓 然后通过 JS 获取卡片的对应的图片、标题、用户头像、信息对应的DOM元素 数据请求完成后,然后将数据填充至对应的DOM元素 思路就聊到这里,是不是很简单...,等JS拿到数据内容后,然后动过DOM 相关的API进行内容的填充。

85030
  • SVG的动态之美-搜狗地铁图重构散记

    并且不仅仅是改写DOM属性那么简单,而是需要先获取每个节点的坐标然后再进行计算,而我们都知道,获取DOM的offset是非常消耗性能的。...2) 拖动到地铁图边界后,拖动结束(即手指离开屏幕)后需要修正拖动边界,否则会停留在拖动结束的状态可能造成大面积空白。这种修正类似Safari IOS的橡皮筋效果。...远于SVG坐标系的更多细节可以参考理解SVG坐标系和变换:视窗,viewBox和preserveAspectRatio 剩下的问题就是如何将CSS的transform-origin换算成SVG的transform...数据优化 加载优化 旧版数据加载流程及问题 首先加载主逻辑文件index.js,然后index.js中的逻辑获取url的城市参数名称,随后异步加载对应城市的数据文件,加载完成后进行解析和渲染。...这样可以实现数据文件的同步加载,与旧版的对比节省了以下时间: index.js从URL中获取城市名称的时间; index.js创建引用源为城市数据文件script标签的时间,这属于耗时的DOM操作; 异步加载数据文件的时间

    2.2K01

    BloodHound

    Neo4js数据库 之后在Neo4js官方网站(https://neo4j.com/download-center/#community)下载最新的Neo4j数据库安装包,如下所示: ?...下载完成并解压,只有配置neo4js环境变量: ? 之后打开cmd窗口,进入解压后的bin目录,在cmd下输入命令“neo4j.bat console”, 启动Neo4j服务: ?...具有外部域组成员身份的用户。 具有外部域组成员身份的组。 映射域信任。 无约束委托系统的最短路径。 从 KerberoAstable 用户获得的最短路径。...中间的一组,第一个节点中的三个用户为域管理员委派服务账号,可以对该域的域控制器 进行 dcsync同步,将第二个节点的用户(属于 Domain Admins 组)的散列值同步过来,进 而获取域控制器权限...第四节点组是第五个 节点计算机的本地管理员组,在该计算机可以获取第五个节点用户(属于 Domain Admins 组)的散列值,进而获取域控制器权限 这里用一个第三方的图片来看看: ?

    1K10

    前端技术工具类文章

    前沿 vue.draggable 属性名称 说明 group :group= "name",相同的组之间可以相互拖拽 sort :sort= "true",是否开启内部排序,如果设置为false,它所在组无法排序...,在其他组可以拖动排序 delay :delay= "0", 鼠标按下后多久可以拖拽 touchStartThreshold 鼠标移动多少px才能拖动元素 disabled :disabled= "true...Darkmode.js实现黑暗模式 Darkmode.js运用的是CSS里面的一个特性叫mix-blend-mode ,这个 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合,再加上...获取上、下级html元素 js删除html元素方法] js获取下级html元素:htmlEle.childNode; js获取上级html元素:htmlEle.parentNode; js删除当前html...pageX、pageY:事件属性返回当事件被触发时鼠标指针相对于整个页面左上角的水平坐标、垂直坐标。

    1.2K30

    「实战」如何用H5实现原生体验的图片预览组件

    基于alloyFinger,本文将介绍在手Q动漫上的图片预览组件是如何做到媲美原生体验的手势效果,同时也介绍一下关于图片手势效果里隐含的一些细节。希望对要实现手势交互和动画的前端同学有所启发。...获取属性只需要var x = ele.translateX,而设置css3属性只需要ele.transalteX = 10,非常方便。...翻页的实现 理论上支持图片无限翻页,这里实现的方法是: 任何时候都保持三张图片在容器中并且中间的图片在屏幕内。翻页之后再通过删除前一张和补充后一张来维持三张图片的状态。...对比手Q的AIO的图片预览,在拖动图片到图片边缘的时候,检测边界并禁止继续拖动。...如果拖动的起点和终点距离很小,那么滑动距离也应该很小才对。否则就导致轻轻拖动一下,惯性却非常大。因此滑动距离是拖动距离的一个小比例值。

    3.1K20

    移动端触屏事件

    触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。...touchstart、touchmove、touchend可以实现拖动元素 但是拖动元素需要当前手指的坐标值 我们可以使用  targetTouches[0] 里面的pageX 和 pageY...移动端拖动的原理:    手指移动中,计算出手指移动的距离。...然后用盒子原来的位置 + 手指移动的距离 手指移动的距离:  手指滑动中的位置 减去  手指刚开始触摸的位置 拖动元素三步曲: (1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置...}); div.addEventListener('touchmove', function (e) { // 计算手指移动距离 手指移动之后的坐标减去初始坐标

    2.9K30

    触屏事件

    触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。...可以实现拖动元素 但是拖动元素需要当前手指的坐标值 我们可以使用  targetTouches[0] 里面的pageX 和 pageY 移动端拖动的原理:    手指移动中,计算出手指移动的距离...然后用盒子原来的位置 + 手指移动的距离 手指移动的距离:  手指滑动中的位置 减去  手指刚开始触摸的位置 拖动元素三步曲: (1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置...(); // (1) 触摸元素touchstart : 获取手指初始坐标,同时获得盒子原来的位置 // (2) 移动手指 touchmove :计算手指的滑动距离...// (3) 离开手指 touchend; var div = document.querySelector("div"); var startX = 0; // 获取手指初始坐标

    73920

    JavaScript——触屏事件

    概述 移动端浏览器兼容性较好,我们不需要考虑以前js的兼容性问题,可以放心的使用原生js书写效果,但是移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件),Android和IOS都有。...正在触摸当前DOM元素上的手指的一个列表 changedTouches 手指状态发生了改变的列表,从无到有,从有到无变化 移动端拖动元素 touchstart、touchmove、touchend可以实现拖动元素...但是拖动元素需要当前手指的坐标值我们可以使用targetTouchies[0]里面的pageX和pageY 移动端拖动的原理:手指移动中,计算出手指移动的距离,然后用盒子原来的位置+手指移动的距离 手指移动的距离...:手指滑动中的位置减去手指刚开始触摸的位置 拖动元素三步曲: 触摸元素touchstart:获取手指初始坐标,同时获得盒子原来的位置 移动手指touchmove:计算手指的滑动距离,并且移动盒子 离开手指...div = document.querySelector('div'); var startX = 0; //获取手指初始坐标 var startY = 0;

    2.1K10

    lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

    同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow。...在上一讲中,实现了InfoWindow的显示,但是并没有实现地图拖动地图InfoWindow随着联动,以及缩放地图InfoWindow随着联动的问题,在本文章中,就上述两个问题提供一个解决思路。...首先,说说拖动地图InfoWindow的联动。...拖动地图时,地图并未做缩放,所以只是做一个位置的偏移,因此,定义一个公共变量,记录InfoWindow出来时候的屏幕位置,拖动鼠标时获取鼠标的相对变化,再讲InfoWindow做一相对应的偏移即可: var...接着,我们说说缩放时InfoWindow的联动。缩放时的联动的逻辑是记录InfoWindow首次出现的地图点的坐标,当缩放结束后将首次出现的地图点转换为屏幕坐标,再将其显示出来。

    1K30

    前端游戏编程基础-如何实现Canvas图像的拖拽、点击等操作

    Canvas在我的理解中就好像在一张画布上绘制图像,它只能看到却“摸”不到,那要如何进行操作呢。我不知道网上是怎么做的,这里用自己的想法做了个DEMO分享给大家。...初步想法是将一个与Canvas图像大小差不多的div覆盖在其上,在拖拽div时将获取的光标坐标修正后传给Canvas绘制函数并刷新图像的位置。...div对象,设置拖拽标志moveFlage,当onmousedown时为true表示可以拖动,当onmouseup时为false表示不能拖动了。...这就是不加修正的结果,当光标点下时,div的坐标即左上角会与光标坐标一致。 修正后: ? 点击时光标总会“粘”在div某点上。...整理后的JS代码: // 绘制图片坐标 var X=0; var Y=0;// js部分 var divObj=document.getElementById("cover"); var moveFlag

    2K70

    web桌面程序之图标拖动排序的分析

    我总结了一下一共有2处难点:   1、如何知道被拖动的图标在拖动结束后处于哪个位置   2、知道拖动结束后图标的最后拖动位置,如何判断是在该位置之前插入,还是在之后插入   知道难点后,就可以来一一解决分析了...首先是第一个,如何知道被拖动的图标在拖动结束后处于哪个位置?...(注:格子就是一组数组,分别记录每个格子的四角位置)   根据格子放置图标这一步好了之后,我们就可以开始处理刚才第一个问题了,“如何知道被拖动的图标在拖动结束后处于哪个位置”,解决思路就是在拖动结束后,...根据鼠标当前位置,在格子数组里进行搜索,因为每个格子都有自己的区域,所以能根据鼠标的坐标查询到处于哪个格子。...然后在图标拖动结束的时候,不仅获取当前位于哪个图标格子,同时也获取当前位于这个图标格子里的小格子的位置,通过这个位置,可以判断出是处于格子的左侧还是右侧,或者上方还是下方。

    1.1K90

    前端实现伸缩框

    JS 实现伸缩框 我们的思路是这样子的: 实现右下角的三角拖动图标 计算伸缩框距离左边和顶部的距离 监听鼠标的点击、拖动、抬起事件,记录鼠标当前相对视窗左上角点的左侧距离和顶部距离 计算鼠标距离边框左侧的距离...当然,我们还需要通过 event.clienX 和 event.clientY 获取当前鼠标距离可视窗口的坐标(clientX, clientY)。...boundingEl = resizableDiv.getBoundingClientRect(); let _width = event.clientX - boundingEl.left; // 获取拖动后的宽度...let _height = event.clientY - boundingEl.top; // 获取拖动后的高度 resizableDiv.style.width = (_width >=...当鼠标按下拖动的时候,触发对伸缩框的宽度和高度的重新计算并赋值。当鼠标抬起后,结束监听。

    28910

    前端游戏编程基础-如何实现Canvas图像的拖拽、点击等操作

    Canvas在我的理解中就好像在一张画布上绘制图像,它只能看到却“摸”不到,那要如何进行操作呢。我不知道网上是怎么做的,这里用自己的想法做了个DEMO分享给大家。...初步想法是将一个与Canvas图像大小差不多的div覆盖在其上,在拖拽div时将获取的光标坐标修正后传给Canvas绘制函数并刷新图像的位置。...div对象,设置拖拽标志moveFlage,当onmousedown时为true表示可以拖动,当onmouseup时为false表示不能拖动了。...这就是不加修正的结果,当光标点下时,div的坐标即左上角会与光标坐标一致。 修正后: ? 点击时光标总会“粘”在div某点上。...整理后的JS代码: // 绘制图片坐标 var X=0; var Y=0;// js部分 var divObj=document.getElementById("cover"); var moveFlag

    1.9K80

    我的截图插件被Gitee使用了

    img Gitee[8]的反馈模块需要登录后,点页面右侧的发送反馈图标。...,只需要判断当前鼠标位置是否超出裁剪框的坐标点区域即可。...部分实现代码如下所示: // 获取裁剪框位置信息 const cutBoxPosition = this.data.getCutOutBoxPosition(); // 绘制中工具的起始x、y坐标不能小于裁剪框的起始坐标...// 绘制中工具的起始x、y坐标不能大于裁剪框的结束坐标 // 当前鼠标的x坐标不能小于裁剪框起始x坐标,不能大于裁剪框的结束坐标 // 当前鼠标的y坐标不能小于裁剪框起始y坐标,不能大于裁剪框的结束坐标...删除8个可操作点 实现思路 一年后的今天,我知道删除那8个点的思路肯定行不通,我就一遍又一遍的体验QQ的截图,观察他是怎么做的,突然,我灵感惊现,我既然有裁剪框的坐标和大小信息,我重新绘制一下这个裁剪框不就好了

    4.7K60

    使用动画曲线编辑器打造炫酷的3D可视化ACE

    inspect 页面通过 gizmo 工具拖动旋转物体到指定位置,点击创建 关键 key 按钮就能创建一个新的关键 key , 并将手动拖动的网格对象的属性值作为 该关键 key 的value 值)...正常情况下,指定了动画属性值和播放模式之后,就可以点击创建 关键 key 来设定关键动画值,一方面可以在 inspector 中手动拖动网格对象,让新建key来获取指定 value, 另一方面也可以在...举个例子:动画操作实战 下面小编将以一个绕场一周的动画为例,给大家详细介绍如何使用Babylon.js: (1)首先需要获取到总帧数,以及特定行为(转向移动)的对应帧数。...获取到物体运动的路线图,记录下每一个特殊(转向移动)帧模型对象所在的坐标(这里可以使用Inspector 当中的坐标拾取功能以及 位移 gizmo 工具来快速获取) 给物体运动设置一个固定速度,比如每秒...2.5 个单位,使用坐标算出来每个坐标到坐标的距离,然后除以时间,结果就是每个单独路径的耗时。

    21910

    使用React和Node构建实时协作的白板应用

    在当今快速发展的数字环境中,实时协作已成为各种网络应用的重要特性。无论地理位置如何,能够无缝地共同工作已经改变了团队的协作和沟通方式。...本文将展示如何使用React和Node构建一个提供实时协作白板的Web应用程序。 实时协作涉及多个用户在共同任务或项目上进行动态和即时的互动。...在本文中,我们将介绍如何在白板上绘制线条和矩形。您可以在此基础上进一步了解并添加其他RoughJS支持的形状和功能。...(用于绘制的代码) } }; 更新元素坐标:在 handleMouseMove 函数中,当用户处于“移动”状态(即拖动元素)时,我们根据鼠标光标的位置和初始偏移量计算元素的新位置。...const newX = clientX - offsetX; const newY = clientY - offsetY; // 更新元素的坐标以执行拖动操作 const

    62020

    js学习总结

    二十四:关于鼠标坐标 Alt键设置或检索一个值,指示Alt键的状态。 altLeft获取或设置一个值,指示左边的ALT键的状态。...clientY设置或获取鼠标指针位置相对于窗口的客户区的y坐标,窗口装饰和滚动条除外。 ctrlKey属性设置或检索CTRL键的状态。 ctrlLeft设置或获取左Ctrl键的状态。...dataTransfer提供拖放式操作使用预定义的剪贴板格式的访问。 offsetX设置或获取鼠标指针位置相对于触发事件的对象的x坐标。...offsetY设置或获取鼠标指针位置相对于触发事件的对象的y坐标。 的returnValue设置或检索从事件的返回值。 screenX检索用户的屏幕上鼠标指针的相对位置的x坐标。...screenY设置或获取鼠标指针位置相对于用户屏幕的y坐标。 shiftLeft获取左Shift键的状态。 srcElement设置或获取触发事件的对象。 类型设置或检索从事件对象事件的名称。

    2.3K60

    看完这篇,你也可以实现一个360度全景插件

    导读 本文从绘图基础开始讲起,详细介绍了如何使用 Three.js开发一个功能齐全的全景插件。 我们先来看一下插件的效果: ? ?...下面的章节即告诉你如何使用 Three.js进行实战 — 实现一个360度全景插件。 这个插件包括两部分,第一部分是对全景图进行预览。 第二部分是对全景图的标记进行配置,并关联预览的坐标。...,在此时将开始拖动标记 _isUserInteracting设置为 true,并且记录起始的屏幕坐标,以及起始的相机 lookAt的坐标。...4.1 要求 建立坐标和全景的映射关系,为全景赋予一套虚拟坐标 在一张平铺的全景图上,可以在任意位置增加标记,并获取标记的坐标 使用坐标在预览全景增加标记,看到的标记位置和平铺全景中的位置相同...4.2 坐标 在 2D平面上,我们能监听屏幕的鼠标事件,我们可以获取的也只是当前的鼠标坐标,我们要做的是将鼠标坐标转换成三维空间坐标。

    8.9K30

    【如果你要学JS XIV】—— 移动端常用事件-移动端touch触摸事件

    导绪移动端浏览器兼容性较好,不需要考虑JS的兼容性问题,可以放心的使用原生JS书写效果,但是移动端也有自己独特的地方。如触屏事件touch (也称触摸事件) , Android和IOS都有。...DOM元素,他们两个是一样的,changedTouches 手指状态发生了改变的列表从无到有或者从有到无4.拖动元素1.touchstart,touchmove,touchend 可以实现拖动元素2.但是拖动元素需要当前手指的坐标值我们可以使用... var div = document.querySelector('div'); // 获取手指初始坐标和盒子的原来位置...= e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; // 获取盒子坐标...= 手指移动之后的坐标 - 手指初始的坐标 var moveX = e.targetTouches[0].pageX - startX; var moveY

    55000
    领券