Question

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

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

Answer 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?

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

1 个答案: