Ursprungskoordinaten für React-Konva-Stufe setzen

Ich verwende react-konva für Zeichnungszwecke. Ich habe die stage konfiguriert und zeichne bestimmte Formen in diesem stage Container. Das Problem, dem ich gegenüberstehe, ist, dass die Koordinaten des Ursprungs (0,0) sich oben links im Bühnencontainer befinden. Ich möchte, dass der Mittelpunkt der Bühne der Ursprung (0,0) ist. Hier ist der aktuelle Code:Ursprungskoordinaten für React-Konva-Stufe setzen

<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>

Quelle

2017-11-15 Arslan Tariq

Verwenden Sie den Befehl layer offset, um die Ebene auf der Bühne neu zu positionieren. Im folgenden Beispiel sehen Sie, dass ich die x- und y-Achse hinzufüge und dann die 200px-Ebene in der Seite versetze. Schließlich zeichne ich einen Kreis auf der Ebene bei (0,0), um zu bestätigen, dass die Schichtkoordinaten basierend auf dieser Position verbleiben, so dass Sie keine Übersetzung auf Ihren Zeichenkoordinaten vornehmen müssen.

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>

Quelle

2017-11-15 11:12:40

Ursprungskoordinaten für React-Konva-Stufe setzen

Antwort

Verwandte Themen