Question

我是Javascript和Kinetics的新手，我需要实现一个函数来绘制带有Kinetics.Js的自由手线。我找到了这个例子，但只适用于start和endpoint。我将通过跟踪鼠标指针实时绘制...我不知道如何更改功能或推送一些新的坐标......

你有什么想法吗？

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

Answer 1

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

舞台不会发出鼠标事件，因此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

要将您的单曲线转换为“折线”，请维护您想要在线条中的外部线段数组，然后将线条的点属性设置为该数组

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>

Kinetic.js - 按照鼠标指针绘制手绘线

1 个答案: