0

让我解释一下我做了什么。首先，我制作了一个舞台，然后在舞台上添加了与舞台相同大小的矩形。之后，我定义了某些可以在 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>

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

4

1 回答 1

1

您需要在对舞台/图层进行更改后使用draw()ordrawScene()功能，以便将它们渲染到场景中。

//<<<<<<<<<<<<<<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 函数之间差异的更多信息，请参阅此问题：KineticJS 绘制方法之间有什么区别？

于 2013-09-11T13:40:58.490 回答