Javascript KineticJS-来自字符串或数组的新形状

我有几个形状定义存储在文件中，即

Kinetic.Rect({width : 150,height : 50,stroke : 'black',fill :'#00D2FF',strokeWidth : .5,cornerRadius : 25,name : 'rect'});

该行（以及其他行）可通过阵列使用。通常，我会按如下方式创建此形状：

rect = new Kinetic.Rect({
            width: 150,
            height: 50,
            stroke: 'black',
            fill: fill,
            strokeWidth: .5,
            cornerRadius: 25,
            name: 'rect'        
        });

如何从数组/字符串创建此形状

（rect=new“string from array[xx]”？

KineticJS形状（如rect）是使用包含所需属性的普通javascript对象定义的

注意：填充定义依赖于变量

fill

。确保

fill

有效

// define a rectangle

var rectDefinition1={
    width: 150,
    height: 50,
    stroke: 'black',
    strokeWidth: .5,
    cornerRadius: 25        
};

您可以将此定义输入这样一个函数，该函数根据您的定义创建一个动能.Rect，并将一个特定的新名称应用于该对象

// function to create a Kinetic.Rect from the rectangle definition

function makeRectFromObject(myObject,newName,newFill){

    var rect=new Kinetic.Rect(myObject);

    rect.name(newName);

    rect.fill(newFill);

    return(rect);

}

您可以像这样使用创建函数：

// Use like this

var rect1=makeRectFromObject(rectDefinition1,"rect1","red");

// add the newly created rect to the layer and redisplay the layer

layer.add(rect1);
layer.draw();

如果要存储和检索对象定义，可以使用JSON：

// serialize your javascript object to a JSON text string 
// This is a regular text string that can be stored in a file or database.

var myRectDefinitionAsJSONText = JSON.stringify(rectDefinition1);

// create a javascript object from your JSON text string

var rectDefinition1= JSON.parse( myRectDefinitionAsJSONText );

---

如果我将单词new添加到字符串/数组中，并按如下方式操作：rect=eval（array[xx]），那么它只在没有“fill:'#00D2FF'”选项的情况下工作。使用此选项，我会得到“意外标记非法”。我可能会避免使用整个定义（包括dynamic.Rect），而只将属性存储为对象属性的JSON数组。然后我会循环这个数组并创建一个新的dynamic.Rect（shapeProperties[I]），如果您要创建不同的形状类型，我可能会在您的对象中包含一个新属性，该属性包含一个type='Rect'或圆或其他什么，然后包含一些逻辑来基于该类型创建不同的dynamic形状。