shift 키를 눌렀을때 정사이즈로 scaling

구현방법

shift 키를 눌렀을 경우 객체를 정사이즈로 스케일링하고 shift 키를 누르지 않았을 경우는 반대로 드래그한 비율대로 리사이즈를 하고싶다.

 

원인

fabricJS에서는 객체 스케일링시 기본 옵션이 정사이즈 비율로 리사이즈되고 shift 키를 눌렀을때 드래그한 비율대로 리사이즈를 한다.

대응

• fabricJS에서 이벤트를 제어할 수 있는 확장 함수로 존재하나 이 확장 함수를 활용하여 조건문을 변경하면서 대응하기는 힘들다.

• fabricJS에서 사용하고 있는 스케일링 조건 함수를 덮어씌우는 방법이다.

• 데모 페이지 : http://jsfiddle.net/yscho03/egzcopf4

 

var canvas = new fabric.Canvas('c', {
    uniScaleTransform: true
});
var rect = new fabric.Rect({
    originX: 'left',
    originY: 'top',
    left: 180,
    top: 10,
    width: 200,
    height: 200,
    fill: 'yellow', 
    strokeWidth: 0
});
canvas.add(rect);
canvas.renderAll();

canvas._isUniscalePossible = function (e, target) {
    return this.uniScaleTransform && !e.shiftKey && !target.get('lockUniScaling');
};