问题描述
如何获取组内三角形相对于画布的相对位置(顶部，左侧)作为波纹管图像?
我遵循了以下主题:
工作示例，您可以在这里找到:
Fabricjs提供了有关如何将转换应用于对象的全面说明: http://fabricjs.com/using-转换
快速解答:组内对象的坐标是点[0,0] 精确地转换了组内对象的变形方式.
在代码中关注我的想法即可.
////1.用两个矩形组成的组安排画布布局var canvas = new fabric.Canvas(document.getElementById('c'));var rect = new fabric.Rect({宽度:100，高度:100，左:50，最高:50填充:'rgba(255,0,0,0.25)'});var smallRect = new fabric.Rect({宽度:12高度:12左:150-12顶部:50 + 50-12/2-10，填充:'rgba(250,250,0,0.5)'});//2.添加可见性和调试原因的位置标记(红点)var refRect = new fabric.Rect({宽度:3，高度:3，左:100，最高:100填充:'rgba(255,0,0,0.75)'});var group = new fabric.Group([rect，smallRect]，{originX:'中心'，originY:中心"});canvas.add(group);canvas.add(refRect);canvas.renderAll();//3.计算画布空间坐标中子对象的坐标函数getCoords(){//分别获取对象和组的转换矩阵var mGroup = group.calcTransformMatrix(true);//标记为true表示我们需要对该对象进行局部转换，//即对象在组内的位置var mObject = smallRect.calcTransformMatrix(true);console.log("group:"，fabric.util.qrDecompose(mGroup));console.log("rect:"，fabric.util.qrDecompose(mObject));//获得应用于子对象的总变换//子项按以下顺序转换://画布缩放和平移=>组转换=>嵌套对象=>嵌套对象=>等等...//为简单起见，请忽略画布的缩放和平移var mTotal = fabric.util.multiplyTransformMatrices(mGroup，mObject);console.log("total:"，fabric.util.qrDecompose(mTotal));//只需将转换应用于原点即可获得我们想要的var c = new fabric.Point(0，0);var p = fabric.util.transformPoint(c，mTotal);console.log("coords:"，p);document.getElementById("output").innerHTML =坐标:" + JSON.stringify(p);//做些琐事，放置红点refRect.left = p.x-3/2;refRect.top = p.y-3/2;canvas.bringToFront(refRect);canvas.renderAll();} How can I get canvas-relative position (top, left) of triangle inside an group as bellow image?
I followed this topic: How to get the canvas-relative position of an object that is in a group? but it only right when group is not rotated.
Working example you may find here: http://jsfiddle.net/mmalex/2rsevdLa/
Fabricjs provides a comprehensive explanation of how transformations are applied to the objects: http://fabricjs.com/using-transformations
Quick answer: the coordinates of an object inside the group is a point [0,0] transformed exactly how the object in the group was transformed.
Follow my comments in code to get the idea.
// 1. arrange canvas layout with group of two rectangles
var canvas = new fabric.Canvas(document.getElementById('c'));
var rect = new fabric.Rect({
width: 100,
height: 100,
left: 50,
top: 50,
fill: 'rgba(255,0,0,0.25)'
});
var smallRect = new fabric.Rect({
width: 12,
height: 12,
left: 150 - 12,
top: 50 + 50 - 12 / 2 - 10,
fill: 'rgba(250,250,0,0.5)'
});
// 2. add a position marker (red dot) for visibility and debug reasons
var refRect = new fabric.Rect({
width: 3,
height: 3,
left: 100,
top: 100,
fill: 'rgba(255,0,0,0.75)'
});
var group = new fabric.Group([rect, smallRect], {
originX: 'center',
originY: 'center'
});
canvas.add(group);
canvas.add(refRect);
canvas.renderAll();
// 3. calculate coordinates of child object in canvas space coords
function getCoords() {
// get transformation matrixes for object and group individually
var mGroup = group.calcTransformMatrix(true);
// flag true means that we need local transformation for the object,
// i.e. how object is positioned INSIDE the group
var mObject = smallRect.calcTransformMatrix(true);
console.log("group: ", fabric.util.qrDecompose(mGroup));
console.log("rect: ", fabric.util.qrDecompose(mObject));
// get total transformattions that were applied to the child object,
// the child is transformed in following order:
// canvas zoom and pan => group transformation => nested object => nested object => etc...
// for simplicity, ignore canvas zoom and pan
var mTotal = fabric.util.multiplyTransformMatrices(mGroup, mObject);
console.log("total: ", fabric.util.qrDecompose(mTotal));
// just apply transforms to origin to get what we want
var c = new fabric.Point(0, 0);
var p = fabric.util.transformPoint(c, mTotal);
console.log("coords: ", p);
document.getElementById("output").innerHTML = "Coords: " + JSON.stringify(p);
// do some chores, place red point
refRect.left = p.x - 3 / 2;
refRect.top = p.y - 3 / 2;
canvas.bringToFront(refRect);
canvas.renderAll();
}
这篇关于如何在Fabric.js组内获取对象的左上角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！