首页
学习
活动
专区
工具
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.6K31

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

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

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

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

    2.1K01

    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,非常方便。...翻页实现 理论上支持图片无限翻页,这里实现方法是: 任何时候都保持三张图片在容器中并且中间图片在屏幕内。翻页之后再通过删除前一张和补充一张来维持三张图片状态。...对比手QAIO图片预览,在拖动图片到图片边缘时候,检测边界并禁止继续拖动。...如果拖动起点和终点距离很小,那么滑动距离也应该很小才对。否则就导致轻轻拖动一下,惯性却非常大。因此滑动距离是拖动距离一个小比例值。

    3.1K20

    触屏事件

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

    73120

    移动端触屏事件

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

    2.9K30

    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

    前端游戏编程基础-如何实现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

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

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

    1.1K90

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

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

    1K30

    前端实现伸缩框

    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 >=...当鼠标按下拖动时候,触发对伸缩框宽度和高度重新计算并赋值。当鼠标抬起,结束监听。

    25010

    截图插件被Gitee使用了

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

    4.7K60

    前端游戏编程基础-如何实现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

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

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

    57020

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

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

    20310

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

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

    8.9K30

    Qt编写地图综合应用9-行政区划

    ,最后将该点集合封闭连起来,就形成了行政区划轮廓图了,使用下来发现地图本身提供函数可以支持到县城,如果需要精确到乡镇那就需要其他办法获得,一种是直接加载事先准备好乡镇边界点集合js文件,一种是在地图上绘制多边形...,然后开启可编辑属性,人为拖动边界,最后获取整个多边形边界点集合即可,这种方法有个专业术语叫扒数据,在音乐界叫扒带。...其实方法一前提也是按照方法二来获取,对于很小应用数量不多乡镇可以采用此法,如果需要很多省市乡镇那就可能需要安排专人去获取了。 二、功能特点 同时支持在线地图和离线地图两种模式。...可设置地图是否可单击、拖动、鼠标滚轮缩放。 可设置协议版本、秘钥、主题样式、中心坐标、中心城市、地理编码位置等。 可设置地图缩放比例和级别,缩略图、比例尺、路况信息等控件可见。...QString(" ply.enableEditing();"); list << QString(" }"); //添加到多边形数组,用来后边获取调整边界数组

    1.3K00

    【如果你要学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

    54400
    领券