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

拖动后获取konva对象X,Y而不是pointerPosition

在Konva.js中,可以通过监听拖动事件来获取Konva对象的X和Y坐标,而不是使用pointerPosition。以下是一个示例代码:

代码语言:txt
复制
// 创建舞台和层
var stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

var layer = new Konva.Layer();
stage.add(layer);

// 创建一个矩形
var rect = new Konva.Rect({
  x: 100,
  y: 100,
  width: 100,
  height: 100,
  fill: 'red',
  draggable: true
});
layer.add(rect);

// 监听拖动事件
rect.on('dragmove', function() {
  var x = rect.x();
  var y = rect.y();
  console.log('X坐标:', x);
  console.log('Y坐标:', y);
});

// 更新舞台
layer.draw();

在上面的代码中,我们创建了一个舞台和一个层,并在层上添加了一个可拖动的矩形。然后,我们通过监听矩形的dragmove事件来获取矩形的X和Y坐标。在事件处理程序中,我们使用rect.x()和rect.y()方法来获取矩形的当前X和Y坐标,并将其打印到控制台上。

这样,当你拖动矩形时,你将能够获取到矩形的X和Y坐标。

Konva.js是一个强大的HTML5 2D绘图库,它提供了丰富的功能和易于使用的API,适用于前端开发人员创建交互式的图形和动画。它可以用于创建各种Web应用程序,如数据可视化、图形编辑器、游戏等。

腾讯云提供了一系列与云计算相关的产品和服务,其中包括云服务器、云数据库、云存储等。你可以通过访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于腾讯云的产品和服务信息。

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

相关·内容

JavaScript 编程精解 中文第三版 十九、项目:像素艺术编辑器

这种方法有许多变种,每个变种都有自己的好处和问题,但它们的中心思想是一样的:状态变化应该通过明确定义的渠道,不是遍布整个地方。 我们的组件将是与界面一致的类。...为此,该类有draw方法,接受更新的像素(具有xy和color属性的对象)的数组,并创建一个覆盖这些像素的新图像。...因此,我们可以将其定义为仅了解当前图片,不是整个应用状态的组件。 因为它不知道整个应用是如何工作的,所以不能直接发送操作。...你必须学习大量愚蠢的技巧和难懂的事实才能掌握它,它提供的默认编程模型非常棘手,大多数程序员喜欢用几层抽象来封装它,不是直接处理它。...所以斜线应该看起来像左边的图片,不是右边的图片。 如果我们有了代码,它在两个任意点间绘制一条直线,我们不妨继续,并使用它来定义line工具,它在拖动的起点和终点之间绘制一条直线。

3K10
  • win10 uwp 改变鼠标 设置光标移动鼠标

    经常在应用需要修改光标,显示点击、显示输入,但是有些元素不是系统的,那么如何设置鼠标? 本文主要:UWP 设置光标,UWP 移动鼠标 设置光标 需要写一点代码来让程序比较容易看到,什么光标对于什么。...他可以在鼠标移入TextBlock 进入函数,可以在函数修改UWP 鼠标光标 首先使用Windows.UI.Xaml.Window.Current.CoreWindow.PointerCursor 设置或获取光标...移动鼠标,设置CoreWindow.PointerPosition 在界面放一个按钮,点击他,移动鼠标 var p = new Point(Window.Current.Bounds.X...+ Window.Current.Bounds.Width / 2, Window.Current.Bounds.Y + Window.Current.Bounds.Height / 2);...Window.Current.CoreWindow.PointerPosition = p; 这样移动很简单,移动是屏幕坐标,不是应用坐标,需要对移动加上窗口移动 https://blogs.msdn.microsoft.com

    2.7K10

    win10 uwp 改变鼠标

    经常在应用需要修改光标,显示点击、显示输入,但是有些元素不是系统的,那么如何设置鼠标? 本文主要:UWP 设置光标,UWP 移动鼠标 设置光标 需要写一点代码来让程序比较容易看到,什么光标对于什么。...他可以在鼠标移入TextBlock 进入函数,可以在函数修改UWP 鼠标光标 首先使用Windows.UI.Xaml.Window.Current.CoreWindow.PointerCursor 设置或获取光标...移动鼠标,设置CoreWindow.PointerPosition 在界面放一个按钮,点击他,移动鼠标 var p = new Point(Window.Current.Bounds.X...+ Window.Current.Bounds.Width / 2, Window.Current.Bounds.Y + Window.Current.Bounds.Height / 2);...Window.Current.CoreWindow.PointerPosition = p; 这样移动很简单,移动是屏幕坐标,不是应用坐标,需要对移动加上窗口移动

    35810

    10分钟带你了解Konva运行原理

    const circle = new Konva.Circle({ x: stage.width() / 2, y: stage.height() / 2, radius...就是在屏幕之外预渲染一个Canvas,之后通过drawImage的形式将其绘制到屏幕要显示的Canvas上面,对形状相似或者重复的对象绘制性能提升非常高。..._getCanvasCache(); context.translate(canvasCache.x, canvasCache.y); var cacheCanvas = this....因为可以存在多个Layer,每个Layer也可以在同一个位置绘制多个Shape,所以理论上可以获取到多个Shape,Konva这里只取了第一个Shape,按照Layer->Shape的顺序来的。..._prepareToStringify(obj); } 反序列化则是对传入的JSON信息进行解析,根据className来创建不同的对象,对深层结构进行递归,然后add到父节点里面。

    4.6K21

    从零打造一个Web地图引擎

    ,非洲边上的海里,瓦片的原点在左上角: 再来看下图会更容易理解: 3857坐标系的原点相当于在世界平面图的中间,向右为x轴正方向,向上为y轴正方向,瓦片地图的原点在左上角,所以我们需要根据图上【...,当地图层级变大需要加载的瓦片数量会比较多,那么均匀分散到各个子域下去请求可以更快的渲染出所有瓦片,减少排队等待时间,基本所有地图厂商的瓦片服务地址都支持多个子域。...[this.zoom]; // 把当前中心点经纬度转成3857坐标 let [x, y] = lngLat2Mercator(...this.center); // 更新拖动的中心点经纬度 center...= mercatorToLngLat(x - mx, my + y); movementX和movementY属性能获取本次和上一次鼠标事件中的移动值,兼容性不是很好,不过自己计算该值也很简单,详细请移步...知道原因就简单了,首先我们加个缓存对象,因为在拖动过程中,很多瓦片只是位置变了,不需要重新加载,同一个瓦片加载一次,后续只更新它的位置即可;另外再设置一个对象来记录当前画布上应该显示的瓦片,防止不应该出现的瓦片渲染出来

    3.8K10

    第157天:canvas基础知识详解

    Context对象就是JavaScript操作Canvas的接口。 *使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文。...相同,注意此方法绘制完路径立即进行stroke绘制 * 语法:ctx.fillRect(x, y, width, height);     - 参数跟2.3.8相同, 此方法执行完成。...y); 参数说明: x,y 绘制图片左上角的坐标, img是绘制图片的dom对象。...4 img.onload = function() { 5 //图片加载完成,执行此方法 6 } 2.6.5 面向对象基础复习补充: 创建对象的方式: 1 * var...3.3.2 位移画布(重点) ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置 参数说明: x: 添加到水平坐标(x)上的值 y: 添加到垂直坐标(y)上的值 发生位移,相当于把画布的

    5.1K22

    vue-grid-layout数据可视化图表面板优化过程所遇问题汇总

    ,dragleave中无法获取数据的问题dataTransfer.setData()中所设置的数据是存储在drag data store中,根据W3C标准,drag data store有三种模式,Read...所以在dragover,dragenter,dragleave中做得更多的应该是对数据的处理,不是应用效果。...drop事件不触发:在发现页面拖动过程中,drop事件不触发,重新了看了下《drag事件详解:html5鼠标拖动排序及resize实现方案分析及实践》drop:源对象拖放到目标对象中,目标对象完全接受被拖拽对象时触发...xy坐标所以在drogover 中,直接获取offsetY、offsetX 即可:const { offsetY: top, offsetX: left } = e;el.dragging.data ... new_pos.y, h, w);    dragPos.x = layout.value[index].x;    dragPos.y = layout.value[index].y;  }, 300

    1.6K30
    领券