1

我是 Javascript 和 Kinetics 的新手，我需要实现一个函数来使用 Kinetics.Js 绘制手绘线。我找到了这个示例，但仅适用于开始和端点。我将通过鼠标指针实时绘制...我不知道如何更改功能或推送一些新坐标...

你有想法吗？

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();
    });
}
4

1 回答 1

3

你在正确的轨道上。以下是您需要了解的更多信息：

舞台不会发出鼠标事件，因此stage.on(“mousedown” …)无法正常工作。

相反，创建一个填充整个舞台的背景矩形。这个背景矩形可以发出鼠标事件。

var background = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: stage.getWidth(),
    height: stage.getHeight(),
    fill: 'white',
    stroke: 'black',
    strokeWidth: 1,
})

背景是侦听舞台范围鼠标事件的简单方法。但是，有一种方法可以在没有背景的情况下监听舞台鼠标事件。在这里讨论： Detecting a Click on Stage but not on Shape in KineticJS

要将您的单线变成“折线”，请维护一个您想要在您的线上的线段的外部数组，然后将您的线的 points 属性设置为该数组

var points=[];
points.push( …another line segment endpoint…);
 myLine.setPoints(points);

然后做你正在做的事情！

这是代码和小提琴：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>
于 2013-04-21T17:32:56.410 回答