Я пишу тебе, потому что я на самом деле застрял.Мне нужно создать стрелку с помощью Konva.js (я персонализировал свою в соответствии с моделью: https://konvajs.github.io/docs/overview.html).
Я приложил свой JS-файл (для создания стрелки), CSS иHTML-файл, который отображает результат путем вызова JS-файла.
Вот моя проблема: когда я ввожу значение в HTML-файл (направление ветра), я бы хотел, чтобы моя стрелка поворачивалась на уголуказано (направление). Это может быть 45 °, 90 °, 135 °, ... (так, NE, E, SE, ...). Но на самом деле, моя стрелка вращается, но также перемещается на экране вокруг верхней частилевая точка. Я не знаю почему. Я бы хотел, чтобы он вращался только сам по себе. Как бы вы это сделали?
Я видел, что он может работать с offsetX и offsetY, но не знаю, есть лилучшее решение или как его использовать. Поэтому мне нужна ваша помощь.
function draw_fleche_vent(direction){
var direction = direction//new Konva.Transformer({
// rotationSnaps: [0, 45, 90, 135, 180, 225, 270, 315, 360],
// });
// var force = "";
// get
// var rotationSnaps = transformer.rotationSnaps();
// set
// transformer.rotationSnaps([0, 45, 90, 135, 180, 225, 270, 315, 360]);
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
var layer = new Konva.Layer();
/*
* create a triangle shape by defining a
* drawing function which draws a triangle
*/
var triangle = new Konva.Shape({
sceneFunc: function (context, shape) {
context.beginPath();
context.moveTo(225, 10);
context.lineTo(150, 190);
context.quadraticCurveTo(230, 90, 300, 190);
context.closePath();
//context.offset({context.width/2, context.height/2});
//context.position({context.width/2,context.height/2});
context.fillStrokeShape(shape);
},
fill: '#FF5757',
stroke: 'black',
strokeWidth: 4
});
//var c = document.getElementById(context);
//context.rotate(direction * Math.PI / 180) ;
triangle.rotate(direction);
layer.add(triangle);
stage.add(layer);
// console.log('ca marche');
// switch (direction) {
// case 0:
// // ayer.add(triangle);.add(direction);
// // add the triangle shape to the layer
// layer.add(triangle);
// // triangle.rotate(0);
// // add the layer to the stage
// stage.add(layer);
// console.log('on est dans le switch 0');
// break;
// case 45:
// //context.rotate();
// // add the triangle shape to the layer
// layer.add(triangle);
// triangle.rotate(45);
// // add the layer to the stage
// stage.add(layer);
// console.log('on est dans le switch 45');
// break;
// case 90:
// // context.rotate(Math.PI / 180);
// // add the triangle shape to the layer
// layer.add(triangle);
// triangle.rotate(90);
// // add the layer to the stage
// stage.add(layer);
// console.log('on est dans le switch 90');
// break;
// case 135:
// // add the triangle shape to the layer
// layer.add(triangle);
// triangle.rotate(135);
// // add the layer to the stage
// stage.add(layer);
// console.log('on est dans le switch 135');
// break;
// case 180:
// // add the triangle shape to the layer
// layer.add(triangle);
// triangle.rotate(180);
// // add the layer to the stage
// stage.add(layer);
// console.log('on est dans le switch 180');
// break;
// case 225:
// // add the triangle shape to the layer
// layer.add(triangle);
// triangle.rotate(225);
// // add the layer to the stage
// stage.add(layer);
// console.log('on est dans le switch 225');
// break;
// case 270:
// // add the triangle shape to the layer
// layer.add(triangle);
// triangle.rotate(270);
// // add the layer to the stage
// stage.add(layer);
// console.log('on est dans le switch 270');
// break;
// case 315:
// // add the triangle shape to the layer
// layer.add(triangle);
// triangle.rotate(315);
// // add the layer to the stage
// stage.add(layer);
// console.log('on est dans le switch 315');
// break;
// case 360:
// // add the triangle shape to the layer
// layer.add(triangle);
// triangle.rotate(360);
// // add the layer to the stage
// stage.add(layer);
// console.log('on est dans le switch 360');
// break;
// }
// add the triangle shape to the layer
// layer.add(triangle);
// add the layer to the stage
// stage.add(layer);
}
// function rotation(){
// triangle.rotate(45);
// stage.draw();
// console.log('loaded');
// }
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src="konva.min.js"></script>
<link rel="stylesheet" href="main.css" />
<script type = "text/javascript" src = "fleche.js"></script>
<meta charset="utf-8">
<title>Arrow - Try</title>
</head>
<body>
<div id="container"></div>
<script type = "text/javascript">
draw_fleche_vent(45);
</script>
</body>
</html>