2016-11-07 15 views
0

이미지를 캔버스에 표시 할 때 그대로 적용되므로 FabricJS 및 Text Shadow 오프셋을 적용합니다.FabricJS에서 캔버스 이미지를 가져올 때 텍스트 그림자 오프셋을 조정하는 방법은 무엇입니까?

캔버스에 텍스트 표시

enter image description here

을 다음과 같이 그러나 다음과 같이 표시 캔버스에 이미지를 저장 한 후. 오프셋

enter image description here

그림자가 감소되었다. 나는 얇은이 절전 기능으로 발생

function textShadowOffsetChange() { 
    var val = $('#text-shadow-offset-slider').slider('option','value'); 
    if(document.getElementById("text-shadow-set").checked && isText()) { 
     currentElement.setShadow({ 
      color: '#000', 
      blur: 5, 
      offsetX: val, 
      offsetY: val 
     }); 
     canvas.renderAll(); 
    } 
} 

을 다음과 같이

내 그림자 기능을 오프셋. 왜냐하면 나는 곱셈기를 사용하고 이미지를 저장할 때 크기를 조절하기 때문입니다. 내 저장 기능은 다음과 같습니다.

var MaskImg = canvas.toDataURL({ 
     format: 'png', 
     multiplier: multi, 
     left: (canvas.width - maskWidth)/2, 
     height: maskOriHeight/multi, 
     width: maskOriWidth/multi 
}); 

그림자 보정에 영향을받지 않는 승수라고 생각합니다. 어떻게 해결할 수 있을까요?

Sample Fiddle

+0

실제 상황을 보려고 plunker 또는 jsfiddle을 만들 수 있습니까? – janusz

+0

@janusz http://codepen.io/isurufit/pen/woKWzw – isuru

답변

0

은 이미 버전 1.6.6에서 수정되었습니다 Fabric.JS에서 벌레처럼 보인다. 그냥 v1.6.6로 업데이트하고 잘 작동합니다 여기를 참조 :

var canvas = new fabric.Canvas(document.getElementById('c')); 
: 지금은이 같은 DOM 요소에 대한 참조를 가져옵니다 있도록 http://codepen.io/anon/pen/aBvpaK

그들은 v1.6.6에서 캔버스 생성자를 변경하는 것