编程技术网

关注微信公众号,定时推送前沿、专业、深度的编程技术资料。

 找回密码
 立即注册

QQ登录

只需一步,快速开始

极客时间

使用Fabric.js旋转对象后重新绘制边界框边框:Redrawing bounding box border after object rotation with Fabric.js

liqunfu 面向对象 2022-5-11 19:31 4人围观

腾讯云服务器
使用Fabric.js旋转对象后重新绘制边界框边框的处理方法

我正在使用Fabric.js(版本1.7.19)在画布上绘制.我有一个旋转"按钮,可将活动对象旋转90度.旋转效果很好,但是对象边界框的边框不会更改以反映旋转的对象,除了看起来很奇怪以外,这意味着我无法正确选择对象.

I'm using Fabric.js (version 1.7.19) to draw on a canvas. I have a 'rotate' button which rotates the active object 90 degrees. The rotation works fine, but the objects bounding box border doesn't change to reflect the rotated object, which other than looking strange means that I can't select the object properly.

这是我的旋转对象功能.

Here is my rotate object function.

rotateItem = (e) => { e.preventDefault(); const currentAngle = this.state.activeItem.item(0).get('angle'); this.state.activeItem.item(0).setAngle(currentAngle + 90).setCoords(); fabricCanvas.renderAll(); } 

问题解答

我知道了.我添加了一个新的fabric.Group到画布上,然后在我真正需要做的是旋转整个组时旋转该组内的第一项(因此 .item(0)).删除 .item(0)可以解决我的问题.

I've figured it out. I was added a new fabric.Group to the canvas and then rotating the first item inside of the group (hence the .item(0)) when what I really needed to do was rotate the entire group. Removing .item(0) fixed my issue.

rotateItem = (e) => { e.preventDefault(); const currentAngle = this.state.activeItem.get('angle'); this.state.activeItem.setAngle(currentAngle + 90).setCoords(); fabricCanvas.renderAll(); } 

这篇关于使用Fabric.js旋转对象后重新绘制边界框边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程技术网(www.editcode.net)!

腾讯云服务器 阿里云服务器
关注微信
^