在 kinetic.js 中选择添加到画布的任何动态形状答案

【问题标题】：To select any Dynamic shapes added to the canvas in kinetic.js在 kinetic.js 中选择添加到画布的任何动态形状
【发布时间】：2013-09-11 13:11:57
【问题描述】：

让我解释一下我做了什么。首先，我制作了一个舞台，然后在舞台上添加了与舞台相同大小的矩形。之后，我定义了某些函数，可以在 MOUSE-DOWN 事件上动态绘制矩形。直到一切顺利，之后我需要的是，当我双击任何形状时，我无法更改该形状的颜色。

让我们看看下面的代码-

<!DOCTYPE html>
<html>
    <head>
        <title>Drawing the custom shapes</title>

        <script src="kinetic-v4.6.0.min.js"></script>

        <script defer="defer">
            function Execute()
            {
                //Defining the stage
                var stage= new Kinetic.Stage({
                    container:'container',
                    width:400,
                    height:400
                });

                //Adding a rectangle layer

                var backLayer= new Kinetic.Rect({
                    x:0,
                    y:0,
                    width:stage.getWidth(),
                    height:stage.getHeight(),
                    fill:'black'

                });
                // Creating a layer
                var layer= new Kinetic.Layer();
                //Adding the background to it!
                layer.add(backLayer);
                stage.add(layer);

                //============ADDING THE FUNCTIONALITY FOR THE RECTANGLE=================
                //Defining the variables
                var isMouseDown=false;
                var refRect,refRect1;
                var Enable=false;
                var originX= new Array();
                var originY=new Array()

                backLayer.on('mousedown',function(){
                    onMouseDown();
                });

                backLayer.on('mousemove',function(){
                    onMouseMove();
                });

                backLayer.on('mouseup',function(){
                    onMouseUp();
                });

                //Defining the global variables
                var initialX=10, initialY=10;

                //Defining the functions
                function onMouseDown()
                {
                    //Code goes here

                    //Setting the mouse
                    isMouseDown=true;

                    //Getting the coordinates
                    var pointerPosition= stage.getPointerPosition();

                    //Reflush the array
                    originX=[];
                    originY=[];
                    originX.push(pointerPosition.x);
                    originY.push(pointerPosition.y);

                    //Creating the rectangle Shape
                     var rect= new Kinetic.Rect({
                        x:originX[0],
                        y:originY[0],
                        width:0,
                        height:0,
                        stroke:'white',
                        strokeWidth:4,
                        name:'Rectangle'

                    });
                    //Creating a copy of it!
                    refRect=rect;
                    refRect1=rect;  //<<<<<<Recently created rectangle as active
                    rect.setListening(true);

                    // Adding to the layer
                    layer.add(rect);
                    Enable=false;
                    //stage.add(layer);

                }

                //<<<<<<<<<<<<<<CODE TO CHANGE THE COLOR OF THE SELECTED SHAPE
                stage.on('dblclick',function(evt){
                    var selected1=evt.targetNode;
                   // var selected=evt.targetNode;
                    alert(selected1.setFill('red'));

                });


                function onMouseMove()
                {
                    //Code goes here

                    if(!isMouseDown)   // ie, is mouse pointer not down iff true than return
                    {
                        return;
                    };
                    var pointerPosition= stage.getPointerPosition();
                    refRect.setWidth(pointerPosition.x-refRect.getX());
                    refRect.setHeight(pointerPosition.y-refRect.getY());
                    layer.drawScene();

                }

                function onMouseUp()
                {
                    isMouseDown=false;
                    stage.add(layer);
                }


            }
        </script>
    </head>

    <body onload="Execute()">
        <div id="container" style="width: 400px; height: 400px; border: 1px solid red"></div><br/>
        <input type="button" id="fill" value="FILL">
    </body>

</html>

请告诉我这背后的问题，以及为什么我无法选择那个特定的形状

【问题讨论】：

标签： javascript canvas kineticjs

【解决方案1】：

在对舞台/图层进行更改后，您需要使用draw() 或drawScene() 函数才能将它们渲染到场景中。

//<<<<<<<<<<<<<<CODE TO CHANGE THE COLOR OF THE SELECTED SHAPE
stage.on('dblclick',function(evt){
    var selected1=evt.targetNode;
    selected1.setFill('red');
    stage.draw(); //or layer.draw();
});

有关 Kinetic Draw 函数之间差异的更多信息，请参阅此问题：What is the difference between KineticJS draw methods?

【讨论】：

谢谢....projeqht。我真的很担心这个……你解决了，谢谢。
别担心，别忘了console.log是你的朋友！如有疑问，请使用 console.log(evt.targetNode);看看它是否选择正确，并检查对象的属性:)