Kinetic.js-通过跟随鼠标指针画一条手绘线 [英] Kinetic.js - Draw a freehandline by following mousepointer
问题描述
我是Javascript和Kinetics的新手，我需要实现一个函数以使用Kinetics.Js绘制自由手绘图.我找到了这个示例，但仅适用于开始和端点.我将通过跟随鼠标指针进行实时绘制...我不知道如何更改功能或按一些新坐标...
I am new in Javascript and Kinetics and I need to implement a function to draw a freehandline with Kinetics.Js. I found this example but works only with start and endpoint. I will draw in realtime by following the mousepointer...I do not know how to change the functions or push some new coordinates...
你有个主意吗?
var moving = false;
function createLine() {
line = new Kinetic.Line({
points: [0, 0, 0, 0],
stroke: "red",
strokeWidth: 2,
id: 'line',
name: 'line',
draggable: true
});
lineLayer.add(line);
addHoverEffect(lineLayer, line);
lineLayer.draw();
}
function drawLine() {
stage.on("mousedown touchstart", function () {
createLine();
if (moving) {
moving = false;
lineLayer.draw();
} else {
var pos = stage.getPointerPosition();
//start point and end point are the same
line.getPoints()[0].x = parseInt(pos.x);
line.getPoints()[0].y = parseInt(pos.y);
line.getPoints()[1].x = parseInt(pos.x);
line.getPoints()[1].y = parseInt(pos.y);
moving = true;
lineLayer.drawScene();
}
});
stage.on("mousemove touchmove", function () {
if (moving) {
var pos = stage.getPointerPosition();
line.getPoints()[1].x = parseInt(pos.x);
line.getPoints()[1].y = parseInt(pos.y);
moving = true;
lineLayer.drawScene();
}
});
stage.on("mouseup touchend", function () {
moving = false;
removeLineDrawEvents();
});
}
推荐答案
您处在正确的轨道上.您需要了解以下一些信息:
该阶段不会发出鼠标事件，因此stage.on(mousedown …)将不起作用.
The stage does not emit mouse events so stage.on("mousedown" …) won’t work.
相反，创建一个填充整个舞台的背景矩形.此背景矩形可以发出鼠标事件.
Instead, create a background rectangle that fills the entire stage. This background rectangle can emit mouse events.
var background = new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: 'white',
stroke: 'black',
strokeWidth: 1,
})
背景是侦听阶段级鼠标事件的简便方法.但是，有 种方法可以在没有背景的情况下收听舞台鼠标事件.这里讨论了它:检测舞台上的单击但不在KineticJS中的Shape上
The background is an easy way of listening for stage-wide mouse events. However, there is a way to listen to stage mouse events without the background. It's discussed here: Detecting a Click on Stage but not on Shape in KineticJS
要将您的单线变成折线"，请维护要在行中的线段的外部数组，然后将行的points属性设置为该数组
To turn your single line into a "polyline", maintain an external array of line segments you want to be in your line and then set your line’s points property to that array
var points=[];
points.push( …another line segment endpoint…);
myLine.setPoints(points);
然后按照您的工作去做！
Then just do what you were doing!
这是代码和小提琴: http://jsfiddle.net/m1erickson/42RHD/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
}
</style>
<script>
$(function(){
// create a stage and a layer
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
// an empty stage does not emit mouse-events
// so fill the stage with a background rectangle
// that can emit mouse-events
var background = new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: 'white',
stroke: 'black',
strokeWidth: 1,
})
layer.add(background);
layer.draw();
// a flag we use to see if we're dragging the mouse
var isMouseDown=false;
// a reference to the line we are currently drawing
var newline;
// a reference to the array of points making newline
var points=[];
// on the background
// listen for mousedown, mouseup and mousemove events
background.on('mousedown touchstart', function(){onMousedown();});
background.on('mouseup touchend', function(){onMouseup();});
background.on('mousemove touchmove', function(){onMousemove();});
// On mousedown
// Set the isMouseDown flag to true
// Create a new line,
// Clear the points array for new points
// set newline reference to the newly created line
function onMousedown(event) {
isMouseDown = true;
points=[];
points.push(stage.getMousePosition());
var line = new Kinetic.Line({
points: points,
stroke: "red",
strokeWidth: 5,
lineCap: 'round',
lineJoin: 'round'
});
layer.add(line);
newline=line;
}
// on mouseup end the line by clearing the isMouseDown flag
function onMouseup(event) {
isMouseDown=false;
}
// on mousemove
// Add the current mouse position to the points[] array
// Update newline to include all points in points[]
// and redraw the layer
function onMousemove(event) {
if(!isMouseDown){return;};
points.push(stage.getMousePosition());
newline.setPoints(points);
layer.drawScene();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
这篇关于Kinetic.js-通过跟随鼠标指针画一条手绘线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
