KonvaJs思维导图

konvasJS坐标基本使用

group的初始坐标全是0，因为group的坐标是相对于stage计算的；

group的width、height获取不到尺寸信息；

group可以通过getClientRect获取尺寸信息；

移动group

• group在这里的position,absolutePosition值是相同的；

• 初始group的position,absolutePosition都是{0,0}；

• 当移动分组时，分组的坐标是相对于起点在发生变化；

可以理解为：

• 添加的新group，它的坐标起点都在左上角{0,0}处；

• 移动group时，它的position,absolutePosition都是相对于上一层画布来计算的；这里的画面基础坐标是不会变的，所以两个属性值保持相等；

• 子元素相对于group放置，它的{x,y}属性值一直相对于group起点来计算；

• 子元素的absolutePosition是相对画布的真实坐标。

父元素 scale 变化

总结：

父层group的scale变化，不会影响子元素 position 的值；

父层group的scale变化，会影响子元素absolutePosition的值；

父层group的scale变化，不会影响子元素scale的值；

父层group的scale变化，不会影响子元素尺寸值；

父层group的scale变化，会影响父元素getClientRect尺寸值；

父层group的scale变化，会影响子元素absoluteScale值。

子元素scale变化

总结：

• 子元素 scale 的变化 ，不会影响自身尺寸；

 旋转

• 旋转时，width，height不会发生变化 ；
• 父元素旋转时，子元素的{x,y}不会变化 ， absolutePosition会发生变化 ；
• 旋转是以左上角为中心；
• 旋转后position和absolutePosition都不会发生变化