拖入Konva JS后获得形状的X和Y

苏拉杰

我在项目中使用Konva JS。我在可拖动的按钮单击上添加了形状。单击形状时,我需要获取形状的X和Y位置。getXgetY函数会返回原始的X和Y。拖动后如何更新X和Y。

下面的示例代码。

 var stage = new Konva.Stage({
        container: 'canvas', // id of container <div>
        width: 500,
        height:300
    });
    
 jQuery("#add-shape").click(function(){
 addShape();
 });
 
 var addShape = function(){
 
 console.log("add shape");
 
 var layer = new Konva.Layer();
 var parentContainer = new Konva.Rect({
            x: stage.getWidth() / 2,
            y: stage.getHeight() / 2,
            width: 200,
            height: 60,
            cornerRadius: 10,
            fill: '#ccc'
        });
        
        var smallCircle = new Konva.Circle({
            x: stage.getWidth() / 2 + 200,
            y: stage.getHeight() / 2 + 30,
            radius: 15,
            fill: "#F2784B",
            stroke: "white",
            strokeWidth: 2
        });
        
        smallCircle.on('click', function() {
         console.log(this.getX(),this.getY());
           addArrow(this.getX(),this.getY());
          //get current X and Y here instead of origina X and Y
        });
        layer.add(parentContainer);
        layer.add(smallCircle);
        layer.draggable('true');
        stage.add(layer);
}

var addArrow = function(arrowX,arrowY){
  var connectorLayer = new Konva.Layer();
	var connector = new Konva.Arrow({
            points: [arrowX,arrowY,arrowX+10,arrowY],
            pointerLength: 4,
            pointerWidth: 4,
            fill: 'black',
            stroke: 'black',
            strokeWidth: 2
        });
    connectorLayer.add(connector);
    stage.add(connectorLayer);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
<button id="add-shape">
      Add shape
      </button>
<div id="canvas">
        
      </div>

薰衣草

如果需要获取鼠标位置,可以使用:

smallCircle.on('click', function() {
     console.log(stage.getPointerPosition());
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Konva Textpath:它如何计算 x 和 y 位置

来自分类Dev

在手绘线/ Konva.Line形状上找到最接近x和y点的位置,到画布上的一个点

来自分类Dev

React-konva 和 konva 不绘制模糊图像

来自分类Dev

在Vue组件中刷新Konva形状状态

来自分类Dev

konva绘制形状以显示在画布中

来自分类Dev

拖入网格

来自分类Dev

转换后将Konva标签大小分组

来自分类Dev

在Konva js上设置图层宽度

来自分类Dev

拖入HTML自定义

来自分类Dev

拖入栅格器之前的延迟

来自分类Dev

无法将 imageView 拖入 viewController

来自分类Dev

x 和 y 在设置 Transform() 后获得附加值

来自分类Dev

Konva序列化和反序列化自定义形状

来自分类Dev

Konva.TextPath 和 Konva.Text 类之间的精确区别?

来自分类Dev

react-konva在舞台中央设置形状

来自分类Dev

萤幕调整大小后Konva事件的位置错误

来自分类Dev

克隆后无法访问Konva Stage的子级

来自分类Dev

从MySQL将NULL作为NaN拖入Matlab

来自分类Dev

Git在原点将master拖入远程分支

来自分类Dev

Konva.js在Rect元素周围挥动笔触

来自分类Dev

Canvas 元素的正确 HiDPI 渲染(使用 Konva.js)?

来自分类Dev

如何在 Konva.js 中创建碰撞

来自分类Dev

Konva.js 在移动设备上非常滞后

来自分类Dev

边界框konva js中的变压器控件

来自分类Dev

X和y的形状不兼容

来自分类Dev

触摸拖动织物JS后获取x和y

来自分类Dev

在不增加尺寸的情况下向Konva形状添加笔触

来自分类Dev

在tileset上获得图块的X和Y

来自分类Dev

React-Konva:防止放置点后可拖动图像恢复位置