Fatal编程技术网
  • canvas/
  • Canvas KineticsJS/PaperJS对鼠标交互没有响应

Canvas KineticsJS/PaperJS对鼠标交互没有响应

canvas

Canvas KineticsJS/PaperJS对鼠标交互没有响应,canvas,kineticjs,fabricjs,paperjs,Canvas,Kineticjs,Fabricjs,Paperjs,我正在尝试使用Kinetic/Paper/Fabric JS编写一个简单的徒手绘图应用程序。然而，我注意到所有的徒手画例子都没有反应 通过响应，我的意思是KineticJS/PaperJS不会更新我拖动鼠标时绘制的线，就像它使用的方式一样 有没有办法解决这个问题？下面是一个使用KineticJS的示例： 原型 #容器{ 边框：实心1px#ccc； 边缘顶部：10px； } $（函数（）{ //创建一个舞台和一个图层 var阶段=新的动力学阶段({ 容器：'容器'， 宽度：350， 身高：350

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

通过响应，我的意思是KineticJS/PaperJS不会更新我拖动鼠标时绘制的线，就像它使用的方式一样

有没有办法解决这个问题？

下面是一个使用KineticJS的示例：


原型
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
}
$（函数（）{
//创建一个舞台和一个图层
var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：350
});
var layer=新的动能层（）；
阶段。添加（层）；
//空阶段不发射鼠标事件
//因此，用一个背景矩形填充舞台
//可以发出鼠标事件的
var background=new dynamic.Rect({
x:0,，
y:0，
宽度：stage.getWidth（），
高度：stage.getHeight（），
填充：“白色”，
笔画：“黑色”，
冲程宽度：1，
})        
图层。添加（背景）；
layer.draw（）；
//我们用来查看是否正在拖动鼠标的标志
var isMouseDown=错误；
//我们当前正在绘制的线的参考
var新线；
//对构成换行线的点数组的引用
var点=[]；
//背景
//监听mousedown、mouseup和mousemove事件
on（'mousedown'，function（）{onMousedown（）；}）；
on（'mouseup'，function（）{onMouseup（）；}）；
on（'mousemove'，function（）{onMousemove（）；}）；
//关于穆斯敦
//将isMouseDown标志设置为true
//新建一行，
//清除新点的点阵列
//将换行符引用设置为新创建的行
函数onMousedown（事件）{
isMouseDown=真；
点数=[]；
points.push（stage.getMousePosition（））；
var线=新的动能线({
点:点,，
笔画：“绿色”，
冲程宽度：5，
线头：“圆形”，
lineJoin:'圆形'
});
图层。添加（行）；
换行符=换行符；
}
//在mouseup上，通过清除isMouseDown标志结束该行
函数onMouseup（事件）{
isMouseDown=错误；
}
//关于mousemove
//将当前鼠标位置添加到points[]数组
//更新换行以包括点[]中的所有点
//并重新绘制图层
mouseMove函数（事件）{
如果（！isMouseDown）{return；}；
points.push（stage.getMousePosition（））；
换行。设定点（点）；
//使用layer.drawScene
//这样可以避免不必要地更新hit canva
layer.drawsecene（）；
}
}); // end$（函数（）{}）；
[补充答案：进一步优化]

进一步的性能包括从图形中取消链接鼠标点捕获

在mousemove中：只捕获鼠标位置——不要尝试在mousemove中绘制任何东西

  • 累计点ray.push（{x:mouseX，y:mouseY}）

你可能会考虑忽略一些鼠标点，因为更少的点仍然画出一个相当好的折线。也许只需要保存每三个鼠标点

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

  • 将累积点添加到动能.Line--myLine.setPoints（累积点数组）

  • 只绘制一条myLine.draw（）

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

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

谢谢你的帮助。这在chrome上非常有效，但在Firefox上提供了相同的旧性能（读取速度慢）。我观察到在Firefox中移动鼠标的速度加快会导致KineticJS被阻塞。你能想到什么解决办法吗？我在Firefox/26.0中向单个Kinetic中添加段时没有遇到任何减速。如我的回答所示：-\n如果遇到延迟，请检查代码，看看你是否试图在mousemove中执行过多操作（每秒触发20多次以上）。请参阅我的答案中关于如何优化mousemove的补充内容。Fabric如何无响应？抱歉，我在firefox linux中测试，似乎所有与画布相关的东西都很慢。firefox windows和Chrome linux上的一切都很好。 
<!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>