Question

我是kineticjs的新手，并且在执行看起来很简单的操作时遇到问题：在对绘制到它的对象进行更改时使画布更新。

我有一个循环创建一些带有数字的圆圈，两者都包含在一个组中。当我点击组时，我希望它们可以缩放和移动。（在我目前的版本中，动作与动力学教程中的动作相同。）我还有两个文本框，当单击组时将显示组的x，y坐标，并在文本框值为时更新形状坐标改变。文本框获取所单击组的值，但如果更改该值，则形状不会移动到正确的位置。我确定我只是遗漏了一些明显的东西，但我不能为我的生活弄清楚它是什么。

HTML

<html>  
<head>  
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

<title>TEST</title> 

<script src="js/jquery-1.10.2.js"></script>
<script src="Libraries/kinetic-v5.1.0.min.js" type='text/javascript'></script>

<script  src="KineticTest.js" type='text/javascript'></script>

<script type='text/javascript'>
window.onload = function(){
    Startup();
}

</script>

 </head>  
 <body>  
<br/>
<h1>TEST</h1>
<input id="x" type="text" value="3" onkeyup='UpdateCircle();'/>
<input id="y" type="text" value="3" onkeyup='UpdateCircle();'/>

<div id="holder" style="height:1000px; width:1000px;"></div>
</body> 

</html>

KineticTest.js

function Startup(){

    // Create a collector to store the created groups
    var ObjGroup = [];

    // Create a stage
    var stage = new Kinetic.Stage({
        container: 'holder',
        width: 1200,
        height: 1200
      });

    // Create a layer to draw stuff to
    var layer = new Kinetic.Layer();

    var ctr = 0;

    // Create a square array of circles with text in them
    for (var i=0; i<5; i++){
        for (var j=0; j<5; j++){
            var r = 15;
            var x = 3*r * i + 2*r;
            var y = 3*r * j + 2*r;

            var group = new Kinetic.Group({
                id: ctr
            });

            // Create a circle
            var circle = new Kinetic.Circle({
                x: 0,
                y: 0,
                radius: r,
                fill: 'lightblue',
                stroke: 'black',
                strokeWidth: 1
              });

            // Create a label
            var label = new Kinetic.Label({
                x: 0,
                y: 0+10,
                rotation:270
            });

            // Create a text element
            var text = new Kinetic.Text({
                  x: 0,
                  y: 0,
                  text: ctr,
                  fontSize: 10,
                  fontFamily: 'Calibri',
                  fill: 'black',
                  align: 'center'
              });

            // add the text element to the label  
            label.add(text);

            // ad the circle and label to the group
            group.add(circle);
            group.add(label);

            // set the x,y location of the group
            group.setX(x);
            group.setY(y);

            // Create a transformation tween to move the group
            group.tween = new Kinetic.Tween({
                node: group, 
                duration: 1,
                x: 400,
                y: 30,
                rotation: 360,
                opacity: 1,
                strokeWidth: 6,
                scaleX: 1.5
              });


            // Create the event handler for clicking on the groups
            group.on('click', function(){
                // Get the selected object
                window.SelectedObjId = this.attrs.id; 

                // Set the text box values
                $('#x').val(this.attrs.x);
                $('#y').val(this.attrs.y);

                // Run the animation
            this.tween.play();
            });

            // Add the group to the layer
            layer.add(group);

            // Add the group to an array so I can find it later
            ObjGroup.push(group);

            ctr++;
        }

    }
      this.ObjGroup = ObjGroup;

   // add the layer to the stage
      stage.add(layer);




}


function UpdateCircle(){
    // This function is called when the user changes the values in the text boxes
    var x = $('#x').val();
    var y = $('#y').val();

    for (var i=0; i<ObjGroup.length; i++){
        var group = ObjGroup[i];
        if (group.attrs.id == window.SelectedObjId){
            group.setX(x);
            group.setY(y);
        }
    }

}

Answer 1

补间无法使用您的代码正常工作。我通过在click事件中放置补间绑定来修复它。注意 这不是一个好的解决方案，现在每次点击都会添加一个新的补间。至少它让我很快为我工作......

实际上，为了回答你的问题，改变的形状值不会在视觉上更新。你必须在自己的形状，图层，阶段（任何容器）以及你想要重绘的孩子身上调用绘图功能。

我认为将updateCircle函数中的if语句更改为以下语句应该这样做：

    if (group.attrs.id == window.SelectedObjId){
        group.setX(x);
        group.setY(y);
        layer.draw();
    }

此外，将属性分配给全局window对象是一种不好的做法（在您的案例中为选定的组）。在外部作用域中，我创建了一个变量selectedGroup，它也在click事件期间被赋值。然后在keyup事件中使用此变量来检查需要从位置更改的组。

另见工作示例的小提琴：http://jsfiddle.net/BsK7Q/

请注意，您似乎还需要进行一些检查，例如检查它是否为实数。

为什么我的kineticjs事件不会触发画布重绘？

1 个答案: