如何在拖动对象时检测画布的中心线以使其居中

How to detect center line of a canvas to center a object when it dragged?

本文关键字：中心线 拖动 对象 检测      更新时间：2023-09-26

这个问题属于fabricJS和canvas。当我把一个物体拖到画布上时，我需要检测中心线并捕捉到它。我在这个问题中找到了一些类似的方法。但它涉及CCD_ 1元素。我需要处理画布的中心线。我是怎么做到的？

画布或织物的中心点。Rect

如果你有一个这样定义的矩形：

var rect = {x:0, y:0, width:50, height:30};

你可以这样计算矩形的中心点：

var centerX = x+width/2;
var centerY = y+height/2;

两点之间的中点（=线段的中点）

如果你有这样定义的线段：

var line={ x0:0, y0:50, x1:100, y1:50 }

你可以这样计算线段的中点：

var dx = x1-x0;
var dy = y1-y0
var midX = x0 + dx*0.50;
var midY = y0 + dy*0.50;

您可以使用moving选项手动定义捕捉功能。请尝试以下操作。

    'object:moving' : function(e){
    var objCenter = e.target.getLeft() + (e.target.getWidth()/2);

    var targetLine = canvas.left+(canvas.width/2); 

    if(objCenter > targetLine-10 && objCenter < targetLine+10){
        e.target.left = targetLine - (e.target.getWidth()/2) ;
    }else{
        e.target.setOpacity(1);
    }

`

相关文章：