Używam KinectJS do rysowania linii w oparciu o ruch myszy. Kiedy użytkownik przytrzymuje przycisk myszy, chcę, aby był on "punktem początkowym" linii, a kiedy użytkownik zwolni, będzie to "koniec" linii, ale gdy będą trzymać mysz w dół, chcę aby móc dynamicznie przerysowywać linię, jak porusza się moja mysz. czy to możliwe?KineticJS - linie rysunkowe z myszą
5
A
Odpowiedz
13
Tak, jest to możliwe.
Zasadniczo, musisz przerysować warstwę podczas zdarzenia onMouseMove. Będziesz potrzebował flagi, aby kontrolować, kiedy linia się porusza.
Po zainicjowaniu skryptu ta flaga powinna być fałszywa.
W onMouseDown, początek linii powinien otrzymać aktualne współrzędne myszy i ustawić flagę na true.
W onMouseMouve, jeśli flaga ma wartość true, należy zaktualizować koniec linii, aby otrzymać bieżące współrzędne myszy.
W onMouseUp flaga powinna mieć wartość false.
patrz przykład poniżej:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.1.js"></script>
<script>
window.onload = function() {
layer = new Kinetic.Layer();
stage = new Kinetic.Stage({
container: "container",
width: 320,
height: 320
});
background = new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: "white"
});
line = new Kinetic.Line({
points: [0, 0, 50, 50],
stroke: "red"
});
layer.add(background);
layer.add(line);
stage.add(layer);
moving = false;
stage.on("mousedown", function(){
if (moving){
moving = false;layer.draw();
} else {
var mousePos = stage.getMousePosition();
//start point and end point are the same
line.getPoints()[0].x = mousePos.x;
line.getPoints()[0].y = mousePos.y;
line.getPoints()[1].x = mousePos.x;
line.getPoints()[1].y = mousePos.y;
moving = true;
layer.drawScene();
}
});
stage.on("mousemove", function(){
if (moving) {
var mousePos = stage.getMousePosition();
var x = mousePos.x;
var y = mousePos.y;
line.getPoints()[1].x = mousePos.x;
line.getPoints()[1].y = mousePos.y;
moving = true;
layer.drawScene();
}
});
stage.on("mouseup", function(){
moving = false;
});
};
</script>
</head>
<body>
<div id="container" ></div>
</body>
</html>
Powiązane problemy
- 1. Ponowne kolorowanie kształtu przy najechaniu myszą przy użyciu KineticJS
- 2. Jak zapisywać i ładować linie rysunkowe iphone SDK
- 3. Płótno profesjonalne efekty rysunkowe
- 4. Interaktywny rysunek z kineticjs
- 5. Piksele rysunkowe w WPF
- 6. Nodejs: Kineticjs w nodejs
- 7. Usuwanie obiektów z warstwy przy użyciu KineticJS
- 8. Płynna animacja KineticJS, kontrolowana prędkość
- 9. Koła rysunkowe na obrazie z matplotlib i numpy
- 10. Elementy komponentu Java z myszą
- 11. Poruszanie myszą
- 12. Skalowanie do stałego punktu w KineticJS
- 13. openGL: linie z shaderami
- 14. kineticjs przeciągnij i upuść obraz z dom na płótno
- 15. KineticJS: wydajność animacji w Firefoksie i Chrome
- 16. Jaka jest różnica między metodami rysowania KineticJS?
- 17. jak zmierzyć szerokość tekstu w kineticjs?
- 18. Rozróżnianie kliknięcia myszą i kliknięcia myszą w wpf
- 19. Czytaj linie z pliku tekstowego, ale pomiń pierwsze dwie linie.
- 20. Kliknięcie myszą z wieloma td rowspan
- 21. Ucieczka nowe linie z JS
- 22. linie rozdzielające z "z INFILE w python
- 23. Vim: zmiana zachowania kliknięcia myszą
- 24. Uzyskaj wartości okna pod myszą
- 25. Tekst na obraz najechany myszą?
- 26. Odrzucanie kliknięcia myszą w TDbGrid.OnColumnMoved
- 27. Tricky opóźnienie po najechaniu myszą
- 28. Zaakceptuj dotyk bez poruszania myszą?
- 29. Symulowanie kliknięcia myszą w JavaScript
- 30. Rysowanie idealnie okrągłych łuków za pomocą HTML5 Canvas + KineticJS
czy istnieje sposób, aby narysować kilka linii, a nie zastąpienie tej samej linii? – Mike
@ TrustWeb, jasne, że tak. Po prostu utwórz nowy kształt na każdym z nich: –
Oto JSFiddle odpowiedzi dla wygody: http://jsfiddle.net/nSSTS/ –