0
내 문제는 KineticJS 버전 5부터 시작되었지만 그 전에는 문제가되지 않았습니다. 네모와 같은 네이티브 KineticJS 도형은 stage.toDataURL 함수를 사용하여 이미지 파일에 저장할 수 있습니다. 그러나 beginPath()와 같은 일반적인 캔버스 메서드로 그려진 비 키네틱 셰이프에서는 작동하지 않습니다. 및 canvas.fill(); (버전 4가이 작업을 잘 수행했습니다). 다음 코드는 빨간색과 파란색의 두 개의 직사각형을 그립니다. 빨간색은 사용자 정의, 파란색은 기본 동적 사각형입니다.KineticJS : toDataURL 함수에 사용자 정의 캔바스 모양을 포함하려면 어떻게해야합니까?
<body>
<div id="container"></div>
<button id="save">
Save as image
</button>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"> </script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var box = new Kinetic.Rect({
x: 400,
y: 80,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(box);
stage.add(layer);
var canvas = layer.getCanvas().getContext('2d');
canvas.beginPath();
canvas.setAttr('strokeStyle', 'black');
canvas.setAttr('fillStyle', '#FF2222');
canvas.setAttr('lineWidth', 8);
canvas.rect(50,80,100,50);
canvas.stroke();
canvas.fill();
document.getElementById('save').addEventListener('click', function() {
stage.toDataURL({
callback: function(dataUrl) {
window.location.href = dataUrl;
}
});
}, false);
</script>
</body>
두 모양이 모두 표시되지만 파란색 직사각형 만 toDataURL 함수에 의해 생성 된 이미지에 나타납니다. 그들이 그린 방식은 KineticJS 5에서 fillStyle 등의 속성을 설정 한 부분에서 변경되었으므로 그 부분과 관련이있을 수도 있습니다. 또는 레이어가 추가 된 후 사용자 정의 모양이 추가되었다고 생각할 수도 있습니다. 무대 ...