Question

我正在尝试使用Kinetic / Paper / Fabric JS编写一个简单的徒手绘图应用程序。但是我注意到所有使用these libraries的徒手画的例子都没有响应。

通过响应，我的意思是KineticJS / PaperJS不会像我拖动鼠标那样更新正在绘制的线，就像jSignature一样。

有没有解决这个问题的方法？

Answer 1

以下是使用KineticJS的示例：http://jsfiddle.net/m1erickson/EsFSg/

<!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://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.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: 350,
            height: 350
        });
        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', function(){onMousedown();});
        background.on('mouseup', function(){onMouseup();});
        background.on('mousemove', 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: "green",
                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);
            // use layer.drawScene
            // This avoids unnecessarily updating the hit canva
            layer.drawScene();
        }


}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>

[除了回答：进一步优化]

进一步的表现涉及从绘图中去除鼠标点捕获。

在mousemove中：仅捕获鼠标位置 - 不要尝试在mousemove中绘制任何内容。

accumulatedPointsArray.push（{X：mouseX，Y：mouseY的}）;

您甚至可以考虑忽略一些鼠标点，因为较少的点仍会绘制相当好的折线。也许只保存每三个传入的鼠标点。

要绘制：设置一个动画循环：

将累计积分添加到Kinetic.Line - myLine.setPoints（cumulativePointsArray）
单个myLine.draw（）。

要挤出每一点性能，请考虑使用Kinetic.Shape而不是Kinetic.Line来显示用户创建的折线。 Kinetic.Shape为您提供了画布上下文，因此它“更接近金属”，与“托管”Kinetic.Line相比，提供更好的绘图性能。当用户完成定义他们的线时，你可以将这些累积点移动到Kinetic.Line中并隐藏两个世界中最好的Kinetic.Shape。

无论如何，祝你的项目好运！

Kinetics JS / Paper JS对鼠标交互没有响应

1 个答案: