1

从服务器我得到带有形状参数的json。我有矩形的容器形状类型。他可以拥有三种类型的元素——视频、图像和文本。对于创建元素，我首先创建数组

var conteiner = [];

然后我创建 3 个元素、容器和两个文本（标题和内容）

var reactConteiner = (<Rect fill={backgroundColor} opacity={opacity} cornerRadius={12} width={width} height={height} stroke={borderColor} strokeWidth={borderSize} />);
var titleText = (<Text width={width} text={title.Text} fill={title.Text} fontSize={title.FontSize} fontFamily={title.FontName} wrap={'none'} padding={5} />);
var contentText = (<Text y={title.FontSize + 5} width={width} text={content.Text} fill={content.Text} fontSize={content.FontSize} fontFamily={content.FontName} padding={5} />);

并添加到数组

conteiner.push(reactConteiner);
conteiner.push(titleText);
conteiner.push(contentText);

然后是动态元素

if (data.children) {
    data.children.map(function(value, key) {
        switch (value.type) {
            case "Image":
            var img = self.AddImage(value);
            if (img) { 
                conteiner.push(img);
                break;
            }
            case "Video":
            var video = self.AddVideo(value);
            if (video) {
                conteiner.push(video);
                break;
            }
        }
    });
}

并返回这个，如何分组

 return (<Group x={x} y={y} width={width} height={height} draggable={true}>{conteiner}</Group>);

但是你可以看到图像，只有当点击某个元素时

包.json

"dependencies": {
    "react": "^0.13.3",
    "react-bootstrap": "^0.24.4",
    "react-bootstrap-modal": "^1.2.1",
    "react-router": "^0.13.3",
    "react-tabs": "^0.4.0",
    "reflux": "^0.2.12",
    "konva": "0.10.0",
    "react-konva": "0.4.2",
    "jquery": "^2.1.4"
  },
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.0.12",
    "babel-preset-react": "^6.0.15",
    "browser-sync": "2.11.0",
    "browser-sync-webpack-plugin": "^1.0.1",
    "css-loader": "^0.23.1",
    "html-webpack-plugin": "^1.6.1",
    "reflux": "^0.2.13",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.9"
  },
4

0 回答 0