Html5 canvas Fabric JS:缩放时捕捉准则未正确定位

对于我的项目：我正在尝试设置对象捕捉和对齐准则。对于捕捉，这意味着当用户拖动对象时，如果对象的任何边接近与另一个对象边对齐，它将捕捉到位。在此期间，指南将作为用户的可视帮助显示

到目前为止，我正在实施由各种fabric.js贡献者完成的现有工作，发现如下：

&

---

有效：在默认缩放（1）下，对象捕捉和对齐准则非常有效

失败：缩放（放大或缩小）时，视觉指引显示在错误的位置，但捕捉保持正确的功能

---

代码示例：移动对象。在默认缩放时，捕捉和指引效果很好。更改缩放级别（使用鼠标滚轮）并注意指导线的位置不正确，但捕捉效果良好

示例1：简单

按原样加载的原始库；简单的演示

样本2：详细

原始库以内联方式复制粘贴，并进行修改以帮助调查

注意：Codepen有完整的代码

//==========================================
//设置
// ==========================================
const canvas=new fabric.canvas（“myCanvas”）
canvas.backgroundColor=“#22222”；
var lastClientX=0
var lastClientY=0
var state=“默认值”
常量外部=空
常数box1=null
常数box2=null
this.centralline_horizontal=“”
this.centralline_vertical=“”
this.alignmentLines_horizontal=“”
this.alignmentLines_vertical=“”
fabric.Object.prototype.set({
尺寸：15，
cornerStyle:“圆形”，
cornerColor:“#ffffff”，
透明转换器：错误
})
setupObjects（）
更新信息（画布）
函数setupObjects（）{
this.outer=new fabric.Rect({
宽度：canvas.getWidth（），
高度：canvas.getHeight（），
前20名，
左:20,，
笔划：“#ffffff”，
事件：错误，
可选：false
})
this.box1=new fabric.Rect({
宽度：240，
身高：100，
前20名，
左:20,，
填充：“#fff28a”，
myType：“盒子”
})
this.box2=new fabric.Rect({
宽度：240，
身高：100，
排名：140，
左:20,，
填写：“#ff8a8a”，
myType：“盒子”
})
this.box3=new fabric.Rect({
宽度：100，
身高：160，
前20名，
左：280，
填写：“#cf8aff”，
myType：“盒子”
})
canvas.add（this.outer）
this.outer.center（）
canvas.add（this.box1）
canvas.add（this.box2）
canvas.add（this.box3）
让allbox=new fabric.ActiveSelection（canvas.getObjects（）.filter（obj=>obj.myType==“box”）{
画布：画布
})
allbox.center（）
销毁
}
函数updateInfo（）{
let info\u zoom=document.getElementById（'info\u zoom'）
let info\u vptTop=document.getElementById（'info\u vptTop'））
let info\u vptLeft=document.getElementById（'info\u vptLeft'））
让info\u centralizer\u horizontal=document.getElementById（'info\u centralizer\u horizontal'））
让info\u centralizer\u vertical=document.getElementById（'info\u centralizer\u vertical'））
让info\u alignmentLines\u horizontal=document.getElementById（'info\u alignmentLines\u horizontal'））
让info\u alignmentLines\u vertical=document.getElementById（'info\u alignmentLines\u vertical'））
info_zoom.innerHTML=canvas.getZoom（）.toFixed（2）
infovpttop.innerHTML=Math.round（canvas.viewportTransform[5]）
infovptleft.innerHTML=Math.round（canvas.viewportTransform[4]）
info\u centralline\u horizontal.innerHTML=this.centralline\u horizontal
info\u centralizer\u vertical.innerHTML=this.centralizer\u vertical
info\u alignmentLines\u horizontal.innerHTML=this.alignmentLines\u horizontal
info\u alignmentLines\u vertical.innerHTML=this.alignmentLines\u vertical
}
// ------------------------------------
//重置
// ------------------------------------
让resetButton=document.getElementById（'reset'）
resetButton.addEventListener（'单击'，函数（））{
重置（）
}，错）
函数重置（）{
canvas.remove（…canvas.getObjects（））
setupObjects（）
setViewportTransform（[1,0,0,1,0,0]）
更新信息（）
}
// ------------------------------------
// ==========================================
//小鼠相互作用
// ==========================================
//鼠标滚轮变焦
canvas.on（'mouse:wheel'，（opt）=>{
设δ=0
// -------------------------------
//车轮分辨率
let wheelDelta=选择e.wheelDelta
设deltaY=opt.e.deltaY
//CHROME WIN/MAC | SAFARI 7 MAC | OPERA WIN/MAC | EDGE
if（车轮三角洲）{
增量=-车轮增量/120
}
//FIREFOX WIN/MAC | IE
if（德尔泰）{
deltaY>0？delta=1:delta=-1
}
// -------------------------------
让指针=canvas.getPointer（opt.e）
让zoom=canvas.getZoom（）
缩放=缩放-增量/10
//限制放大
如果（缩放>4）缩放=4
//限制缩小
如果（缩放<0.2）{
缩放=0.2
}
//canvas.zoomToPoint({
//x:opt.e.offsetX，
//y:opt.e.offsetY
//}，缩放）
canvas.zoomToPoint(
新织物点（canvas.width/2，canvas.height/2），
缩放）；
选项e.预防默认值（）
选项e.停止广播（）
canvas.renderAll（）
canvas.calcOffset（）
更新信息（画布）
})
initCenteringGuidelines（画布）
initAligningGuidelines（画布）
// ==========================================
//画布中心捕捉和对齐指南
// ==========================================
//原件：
// https://github.com/fabricjs/fabric.js/blob/master/lib/centering_guidelines.js
/**
*通过指定“onObjectMove”和“onAfterRender”来扩充画布。
*这种方法很糟糕，因为其他使用这些方法的代码将停止运行。
*需要通过使用pub/sub类型的订阅模型替换回调来修复它。
*（或者使用现有的fabric.util.fire/observe（如果不会太慢的话））
*/
函数初始化中心化准则（画布）{
让canvasWidth=canvas.getWidth（），
canvasHeight=canvas.getHei
 function drawLine(x1, y1, x2, y2) {
    var originXY = fabric.util.transformPoint(new fabric.Point(x1, y1), canvas.viewportTransform),
                dimensions = fabric.util.transformPoint(new fabric.Point(x2, y2),canvas.viewportTransform);
    ctx.save()
    ctx.lineWidth = aligningLineWidth
    ctx.strokeStyle = aligningLineColor
    ctx.beginPath()
   
    ctx.moveTo(
      ( (originXY.x ) ),
      ( (originXY.y ) )
    )
   
    
    ctx.lineTo(
      ( (dimensions.x ) ),
      ( (dimensions.y ) )
    )
    ctx.stroke()
    ctx.restore()
  }