반응 - konva 단계에 대한 원점 좌표를 설정

나는 그림을 그리기 위해 react-konva을 사용하고 있습니다. 내가 stage을 구성했고 그 안에서 stage 컨테이너의 특정 도형을 그리는 중입니다. 내가 직면하고있는 문제는 원점 좌표 (0,0)가 스테이지 컨테이너의 왼쪽 상단에 있다는 것입니다. 무대의 중심을 원점 (0,0)으로하고 싶습니다. 다음은 현재 코드입니다.반응 - konva 단계에 대한 원점 좌표를 설정

<Stage 
    height={800} 
    width={1200} 
    style={{ backgroundColor: '#fff', border: 'solid'}}> 
    { 
    this.state.circlePoints.length !== 0 && 
    <LineComponent 
     startX={1200/2} 
     startY={800/2} 
     endX={this.state.circlePoints[0].pointX*1.3} 
     endY={this.state.circlePoints[0].pointY*1.3} 
     startColor={firstCircle[0].outerColor} 
     endColor={pmData[0].outerColor} 
    /> 
    } 
    <CircleComponent 
    x={1200/2} 
    y={800/2} 
    outerRadius={firstCircle[0].weight*1200} 
    outerColor={firstCircle[0].outerColor} 
    innerRadius={firstCircle[0].weight*1200*0.3} 
    innerColor={firstCircle[0].innerColor} 
    shadowColor={firstCircle[0].innerColor} 
    getCirclePoints={this.getCirclePoints} 
    /> 
    { 
    this.state.circlePoints.length !== 0 && 
    <CircleComponent 
     x={this.state.circlePoints[0].pointX*1.3} 
     y={this.state.circlePoints[0].pointY*1.3} 
     outerRadius={pmData[0].weight*1200} 
     outerColor={pmData[0].outerColor} 
     innerRadius={pmData[0].weight*1200*0.3} 
     innerColor={pmData[0].innerColor} 
     shadowColor={pmData[0].innerColor} 
    /> 
    } 
</Stage>

출처

2017-11-15 Arslan Tariq

스테이지에서 레이어의 위치를 바꾸려면 레이어 오프셋 명령을 사용하십시오. 아래 예제에서 x 축과 y 축을 추가 한 다음 레이어에 200px 오프셋을 페이지에서 볼 수 있습니다. 마지막으로 (0,0)에 레이어의 원을 그려 레이어 좌표가이 위치를 기반으로 남아 있는지 확인하여 드로잉 좌표에 대한 변환 작업을 수행 할 필요가 없도록합니다.

var stage = new Konva.Stage({ 
 
     container: 'container', 
 
     width: 600, 
 
     height: 400 
 
    }); 
 

 
var layer = new Konva.Layer(); 
 
stage.add(layer) 
 

 
var axisX = new Konva.Line({ 
 
     points: [-200, 0, 200, 0], 
 
     stroke: 'red', 
 
     strokeWidth: 2, 
 
     lineCap: 'round', 
 
     lineJoin: 'round' 
 
    }); 
 
    
 
var axisY = new Konva.Line({ 
 
     points: [0, 200, 0, -200], 
 
     stroke: 'red', 
 
     strokeWidth: 2, 
 
     lineCap: 'round', 
 
     lineJoin: 'round' 
 
    }); 
 
    
 
layer.add(axisX) 
 
layer.add(axisY) 
 

 
// offset the layer on the stage 
 
layer.offsetX(-200) 
 
layer.offsetY(-200) 
 

 
// draw a circle at 0,0 
 

 
    var circle = new Konva.Circle({ 
 
     x: 0, 
 
     y: 0, 
 
     radius: 70, 
 
     stroke: 'black', 
 
     strokeWidth: 4 
 
    }); 
 

 
    // add the shape to the layer 
 
    layer.add(circle); 
 

 
layer.draw(); 
 
stage.draw();

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <div id="container"></div> 
 
      
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
    <script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script> 
 
    <script type="text/javascript" src="test.js"></script> 
 

 

 

 
</body> 
 
</html>

출처

2017-11-15 11:12:40

반응 - konva 단계에 대한 원점 좌표를 설정

답변

관련 문제