홈>

javascript - fabricjs - 그룹 크기를 조정할 때 객체 위치를 고정 상태로 유지

일부 요소가 같은 크기와 위치에 고정되어야하는 그룹을 생성하려고합니다 (그룹의 테두리에서 볼 수 있음).

크기 문제를 파악했습니다. 그러나 위치를 동일하게 유지하기 위해 완전히 작동하는 솔루션을 얻지 못했습니다. 내 현재 접근 방식은 다음과 같습니다.

http://jsfiddle.net/on7kujhs/111/

let originalX = e.originalLeft + e.width / 2, // my true left of my center, relative to group
          percentageX = 0.5 + originalX / target.width, // how much I will change my position in percent. zero if originalX is exactly the same as half the width, one if im at right edge
          totalChangeX = (target.scaleX - 1) * target.width / 2, // how much the center shifts
          myMovX = percentageX * totalChangeX; // how much I moved to the right
        if (e.groupedScaleOriginX === 'left') {
          e.left = e.originalLeft - myMovX;
        } else if (e.groupedScaleOriginX === 'right') {
          e.left = e.originalLeft + totalChangeX * (1 - percentageX);
        }
javascriptfabricjs

  • 답변 # 1

    내가 알아 낸 것 같아.

    http://jsfiddle.net/y3o7Lwn6/27/

    중요한 것은 그룹 경계에 상대적인 모든 객체 위치를 저장하고 스케일링시 수정하는 것뿐만 아니라 그룹 왼쪽 상단 경계에 상대적인 실제 상단/왼쪽 위치를 저장하는 것입니다 :

     let dX = (tr.scaleX - 1) / tr.scaleX; 
  let dY = (tr.scaleY - 1) / tr.scaleY; 
  if (e.groupedScaleOriginX == 'left') {
    e.left = e.originalLeft - dX * e.trueLeft;
  } else if (e.groupedScaleOriginX == 'right') {
    e.left = e.originalLeft - dX * e.trueRight;
  }
  if (e.groupedScaleOriginY == 'top') {
    e.top = e.originalTop - dY * e.trueTop;
  } else if (e.groupedScaleOriginY == 'bottom') {
    e.top = e.originalTop - dY * e.trueBottom;
  }

  • 이전 spring - 예외 처리기에서 내용 유형을 변경하는 방법
  • 다음 sql server - 날짜가 겹치지 않는 SQL 그룹화 결과