Kineticjs -ms-transform에서 Draggable이 작동하지 않습니다.

Kineticjs 4.3.3을 사용하려고했습니다. 그래픽 이미지를 만들고 부모 div를 가로 질러 드래그 할 수 있지만 부모 div의 스타일 속성 (예 : http://jsfiddle.net/kreavie/MZSE9/) 아래에 스캘링이 설정된 경우에는 작동하지 않습니다. 이전에 스캘링이 설정되었을 때 드래그하여 작업을 수행하는 방법에 대한 아이디어가 있습니까?Kineticjs -ms-transform에서 Draggable이 작동하지 않습니다.

감사합니다, krlib

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=9"> 
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script> 
    <script type="text/javascript"> 


window.onload = function() { 

     var par = document.getElementById('frame'); 
     var canvas = document.createElement('div'); 
     canvas.id = "canvas1"; 
     par.appendChild(canvas); 


     var stage = new Kinetic.Stage({ 
      container: 'canvas1', 
      width: 500, 
      height: 500 
     }); 

     var layer = new Kinetic.Layer(); 
     var triangle = new Kinetic.Polygon({ 
      stroke: "red", 
      strokeWidth: 4, 
      points: [60, 100, 90, 100, 90, 140], 
      draggable: true 
     }); 

     layer.add(triangle); 
     stage.add(layer); 


    } 
    </script> 

</head> 
<body > 

    <div id="frame" style="width: 200px; height: 200px; -ms-transform: scale(0.420091);"> 
        </div> 

</body> 
</html>

출처

2013-02-28 krlib

참조 : http://jsfiddle.net/MZSE9/2/

개체가되지는 스케일링을 적용하는 다른 사업부로, 캔버스 요소에 대해 로컬입니다.

하면 객체, 레이어 또는 전체 단계를 확장하려면

은 수행의 응답

shape.setScale(xAmount, yAmount); 
stage.setScale(xAmount, yAmount); 
layer.setScale(xAmount, yAmount);

출처

2013-02-28 16:19:38 SoluableNonagon

감사합니다. 결국 내가하려는 것은 동적으로 캔버스 요소를 문서 페이지에 그립니다. 픽셀 좌표와 캔버스 크기를 orinigal 페이지 크기와 일치시켜야합니다. 따라서 사용자가 문서 페이지를 확대 또는 축소하고 그래픽 마크 업을 추가하면 해당 마크 업을 나중에 가져 와서 처음에 그려진 정확한 문서 페이지 좌표로 문서 디스플레이에 다시 적용 할 수 있습니다. – krlib

캔버스가 변형 (회전, 크기 조절 등)되면 KineticJS는 더 이상 마우스 이벤트에 응답하지 않습니다. 고의적이지 않으면 버그 일 수 있습니다. – allenhwkim

KineticJS는 현재 컨테이너 요소의 크기를 조절하지 않아야합니다. 나는 이것에 좀 더 생각해야 할 것이다. –

Kineticjs -ms-transform에서 Draggable이 작동하지 않습니다.

답변

관련 문제