正文 

当前位置： 首页 > 问答 >

缩放和平移后fabricJS中的对象对齐

     2023-03-25     173

关键词：

【中文标题】缩放和平移后fabricJS中的对象对齐【英文标题】：Object alignment in fabricJS after zoom and pan 【发布时间】：2021-06-18 07:58:41 【问题描述】：

当我想将元素左对齐时，我使用fabricJS 和Angular，例如我使用以下方法

alignLeft() 
    // Get Selected Elements
    var obj = this.canvas.getActiveObject();

    // if no element is selected
    if (obj !== undefined) 
      // Bounding Box of the selected element
      var bound = obj.getBoundingRect();

      obj.set('left', (obj.left - bound.left));
      //this.canvas.getActiveObject().setCoords();
      this.canvas.renderAll();

只有当我更改缩放比例或平移画布时，对齐才会像魅力一样发挥作用，如果我更改缩放比例或平移画布，一切都会以错误的方式进行。下面是我用于放大/缩小的方法

this.canvas.on('mouse:wheel', function (opt) 
  var delta = opt.e.deltaY;
  var zoom = this.canvas.getZoom();

  zoom *= 0.999 ** delta;
  if (zoom > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  this.canvas.zoomToPoint( x: opt.e.offsetX, y: opt.e.offsetY , zoom.toFixed(4));
  opt.e.preventDefault();
  opt.e.stopPropagation();
.bind(this));

this.canvas.on('mouse:down', function (opt) 
  var evt = opt.e;
  if (evt.altKey === true) 
    this.isDragging = true;
    this.selection = false;
    this.lastPosX = evt.clientX;
    this.lastPosY = evt.clientY;
  
);

this.canvas.on('mouse:move', function (opt) 
  if (this.isDragging) 
    var e = opt.e;
    var vpt = this.viewportTransform;
    vpt[4] += e.clientX - this.lastPosX;
    vpt[5] += e.clientY - this.lastPosY;
    this.requestRenderAll();
    this.lastPosX = e.clientX;
    this.lastPosY = e.clientY;
  
);

this.canvas.on('mouse:up', function (opt) 
  // on mouse up we want to recalculate new interaction
  // for all objects, so we call setViewportTransform
  this.setViewportTransform(this.viewportTransform);
  this.isDragging = false;
  this.selection = true;
);

在阅读了multiple questions 和fabricJS Documentation 之后，我将alignLeft() 方法更改为以下内容：

alignLeft() 
    // Get Selected Elements
    var obj = this.canvas.getActiveObject();

    // if no element is selected
    if (obj !== undefined) 
      // Bounding Box of the selected element
      var bound = obj.getBoundingRect();
      let p = x: (obj.width / 2), y: obj.top
      var invertedMatrix = fabric.util.invertTransform(this.canvas.viewportTransform);
      let newp = fabric.util.transformPoint(p, invertedMatrix);

      obj.set('left', newp.x);
      //this.canvas.getActiveObject().setCoords();
      this.canvas.renderAll();

【问题讨论】：

【参考方案1】：

您需要使用ViewPortCoordinates（参见fabricJS Docs）根据视口获取canvas 的top left、top right、bottom left、bottom right 坐标。

描述设计属性上的画布元素扩展是 tl,tr,bl,br。如果画布没有缩放/平移这些点是画布的四个角如果画布是 viewportTransformed 你这些点表示画布元素在普通未变换坐标中的扩展坐标使用@method calcViewportBoundaries 更新。

对于alignLeft() 方法，您可以将其更新为以下内容：

alignLeft() 
    // Get Selected Elements
    var obj = this.canvas.getActiveObject();

    // if no element is selected
    if (obj !== undefined) 
        const viwePortCoords = this.canvas.vptCoords;
        obj.set('left', viwePortCoords.bl.x + (obj.width / 2));

        this.canvas.renderAll();
    
    this.canvas.fire('object:modified',  target: obj );

【讨论】：

fabricjs：缩放后如何显示对象大小

】fabricjs：缩放后如何显示对象大小【英文标题】：fabricjs:howtoshowobjectsizeafterscaling【发布时间】：2015-08-2312:28:55【问题描述】：我正在使用名为“WoocommerceProductDesigner”的wordpress插件，其中包含一个1.4.9版中名为fabicjs的JavaScript库... 查看详情

如何通过平移、旋转和/或缩放调整来匹配两个分割蒙版

】如何通过平移、旋转和/或缩放调整来匹配两个分割蒙版【英文标题】：Howtomatchtwosegmentationmaskswithtranslation,rotationand/orscaleadjustment【发布时间】：2021-03-2521:38:25【问题描述】：我有两张从稍微不同的位置拍摄的图像。在对这些... 查看详情

平移和缩放的替代方案

】平移和缩放的替代方案【英文标题】：Alternativesforpanningandzooming【发布时间】：2014-09-1221:44:55【问题描述】：我有一个包含许多子视图的视图（代表数学对象——想想一个方程组，每个方程中的每个项都是一个单独的控件）。... 查看详情

缩放和平移画布后鼠标坐标不匹配

】缩放和平移画布后鼠标坐标不匹配【英文标题】：Mousecoordinatesdon\'tmatchafterScalingandPanningcanvas【发布时间】：2014-09-1301:11:31【问题描述】：我对javascript和canvas非常陌生，我有一个程序可以检测椭圆路径上的动画元素。它稍后会... 查看详情

如何在平移/旋转后重新计算轴对齐的边界框

】如何在平移/旋转后重新计算轴对齐的边界框【英文标题】：Howtorecalculateaxis-alignedboundingboxaftertranslate/rotate【发布时间】：2011-05-1903:46:50【问题描述】：当我第一次加载我的对象时，我用最大和最小(x,y,z)点计算初始AABB。但这是... 查看详情

UIImageView：如何在平移和缩放后仅捕获可见内容

】UIImageView：如何在平移和缩放后仅捕获可见内容【英文标题】：UIImageView:HowtocapturejustvisiblecontentafterPan&Zoom【发布时间】：2020-09-2115:49:43【问题描述】：我有一个UIImageView，它由ImagePicker加载，照片（3kx4k大小）使用AspectFit模... 查看详情

平移和缩放后鼠标单击转换为 svg

】平移和缩放后鼠标单击转换为svg【英文标题】：Mouseclicktransformationtosvgafterpanandzoom【发布时间】：2016-02-2810:04:33【问题描述】：我正在使用snap.svg和snap.svg.zpd库。如果我使用snap.svg和jQuerypanzoom库组合，我也会遇到同样的问题。... 查看详情

UIScrollview 子视图在缩放后无法识别平移手势

】UIScrollview子视图在缩放后无法识别平移手势【英文标题】：UIScrollviewsubviewsnotrecognizingpangestureafterzooming【发布时间】：2015-11-0807:27:20【问题描述】：我有一个滚动视图，我在其中添加了一个图像视图作为子视图。滚动视图的内... 查看详情

d3 v7 中的简单平移和缩放

】d3v7中的简单平移和缩放【英文标题】：SimplePanandZoomind3v7【发布时间】：2021-10-0119:25:47【问题描述】：我需要使用d3版本7平移和放大一个简单的d3节点图。constsvg=d3.select("#network_graph").attr("viewBox",[0,0,width,height]);似乎没有任何关... 查看详情

缩放、旋转、平移 w。 openGl ES 2.0 中的矩阵

】缩放、旋转、平移w。openGlES2.0中的矩阵【英文标题】：Scale,rotate,translatew.matricesinopenGlES2.0【发布时间】：2014-09-2913:30:14【问题描述】：我正在使用OpenGLES2.0并尝试使用一些方法来构建我的对象类来旋转/平移/缩放它们。我只是... 查看详情

canvas - 使用fabricjs和angularjs进行捏缩放

】canvas-使用fabricjs和angularjs进行捏缩放【英文标题】：canvas-pinchzoomingusingbyfabricjsandangularjs【发布时间】：2014-11-0215:05:13【问题描述】：我正在尝试使用FabricJs在画布上进行捏合缩放。但我对此一无所知。我还从谷歌搜索了一些代... 查看详情

矩阵的平移旋转与缩放

世界坐标中的一个点乘以一个四维矩阵，可以实现平移，旋转和缩放等等。平移就是，旋转和缩放就是(M分别是对应的旋转缩放矩阵)当中为0时，是向量，为1时，是坐标。平移，旋转，缩放，     查看详情

如何修复 FabricJS 中 Inkscape SVG 的缩放和旋转？

】如何修复FabricJS中InkscapeSVG的缩放和旋转？【英文标题】：HowcanIfixtheScalingandRotatingofanInkscapeSVGinFabricJS?【发布时间】：2014-03-2307:58:03【问题描述】：我在使用FabricJS缩放和旋转SVG图像时遇到了一些问题。我一直在为我的网站开发... 查看详情

画布可绘制对象和居中缩放

】画布可绘制对象和居中缩放【英文标题】：Canvasdrawablesandcenteredzooming【发布时间】：2012-02-0117:59:00【问题描述】：我正在使用Googletutorial为我的画布实现缩放功能。我在画布上绘制了几个项目，我可以通过Canvas.translate(dx,dy)将... 查看详情

如何使用现代 OpenGL 的 GLM 或 JOML 矩阵正确转换（平移、旋转、缩放）对象

...何使用现代OpenGL的GLM或JOML矩阵正确转换（平移、旋转、缩放）对象【英文标题】：Howtotransform(translate,rotate,scale)objectcorrectlyusingGLMorJOMLmatricesformodernOpenGL【发布时间】：2018-06-0903:54:49【问题描述】：我正在尝试使用矩阵来实现对... 查看详情

缩放后无法平移 UIScrollView

】缩放后无法平移UIScrollView【英文标题】：CannotpanUIScrollViewafterzooming【发布时间】：2016-04-1116:34:57【问题描述】：我使用以下代码以编程方式创建了一个UIScrollView：.h:@interfaceMainController:UIViewController<UIScrollViewDelegate>@property(no... 查看详情

Javascript / D3.js - 绘制大型数据集 - 提高 d3.js 绘制的 svg 图表中的缩放和平移速度

...Javascript/D3.js-绘制大型数据集-提高d3.js绘制的svg图表中的缩放和平移速度【英文标题】：Javascript/D3.js-drawlargedataset-improvethespeedofzoomandpaninsvgchartplotedbyd3.js【发布时间】：2020-10-1820:05:25【问题描述】：编辑刚刚找到了50millionpointswith... 查看详情

如何在 as3 中平滑图像的“缩放”和“平移”

】如何在as3中平滑图像的“缩放”和“平移”【英文标题】：Howtosmooth\'zoom\'and\'pan\'ofimageinas3【发布时间】：2019-01-1507:34:08【问题描述】：我在Adob​​eAnimate中使用ActionScript3来缩放和平移绘图。每当单击控制面板中的中心按钮时... 查看详情