Javascript KineticJS:保存为JSON:多次保存的对象
大编辑 在分析了我的情况之后，这似乎是另一个问题/另一个场景，更一般地说是关于保存到json 因此，我使用以下代码将一个新的Shapegroup添加到stage上的层中：Javascript KineticJS:保存为JSON:多次保存的对象,javascript,json,html5-canvas,kineticjs,Javascript,Json,Html5 Canvas,Kineticjs,大编辑 在分析了我的情况之后，这似乎是另一个问题/另一个场景，更一般地说是关于保存到json 因此，我使用以下代码将一个新的Shapegroup添加到stage上的层中： ... var selectedShape, json = null; ... function addNode(xPos, yPos) { //create the new node var node = new Kinetic.Circle({ id: 'myRect', x
...
var selectedShape, json = null;
...
function addNode(xPos, yPos)
{
//create the new node
var node = new Kinetic.Circle({
id: 'myRect',
x: xPos,
y: yPos,
radius: 30,
fill: '#FFFFFF',
stroke: '#000000',
strokeWidth: 4,
// test: "testattr"
});
// create the label
var label = new Kinetic.Text({
x: node.getX() - node.getRadius() + 10,
y: node.getY() + node.getRadius() + 4,
text: 'node',
fontSize: 12,
fontFamily: 'Arial',
fill: 'black',
});
// create group
var nodeGroup = new Kinetic.Group({
draggable: true
});
// add shapes to group
nodeGroup.add(node);
nodeGroup.add(label);
// add group to the layer
layer.add(nodeGroup);
// add layer to the stage
stage.add(layer);
/*
* Events for Nodes
* all events for the actual states / nodes
*/
// mouse over => red stroke
node.on('mouseover', function() {
$('body').css('cursor', 'pointer');
this.setStroke('red');
layer.draw();
});
// mouse out => back in black
node.on('mouseout', function() {
if(selectedShape != this){
console.log('mouseout fired, Position: ' + node.getX());
$('body').css('cursor', 'default');
this.setStroke('#000000');
writeMessage(messageLayer, node.getX()); // just for testing purposes
layer.draw();
}
});
node.on('click tap', function(){ //relevant
if(selectedShape != null){
$('body').css('cursor', 'default');
selectedShape.setStroke('#000000');
layer.draw();
}
selectedShape = null;
console.log('clicked');
selectedShape = this;
this.setStroke('red');
layer.draw();
});
/*
* Events for Node-labels
* events for labels
*/
label.on('mouseover', function() {
$('body').css('cursor', 'text');
this.setStroke('red');
this.setStrokeWidth(0.5)
layer.draw();
});
label.on('mouseout', function() {
$('body').css('cursor', 'default');
this.setStroke('');
this.setStrokeWidth(0);
layer.draw();
});
//change the Label of a node, return 'node' if nothing entered or cancelled.
label.on('click', function(){
var lblTxt = prompt('Neue Bezeichnung:', '');
if (lblTxt) {
this.setText(lblTxt);
} else {
this.setText('node');
}
layer.draw();
});
}
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
}
]
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
}
]
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
},
{
"attrs": {
"draggable": true,
"x": 206,
"y": 75,
"rotation": 0,
"scaleX": 1,
"scaleY": 1,
"offsetX": 0,
"offsetY": 0,
"skewX": 0,
"skewY": 0
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "red",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
},
{
"attrs": {
"draggable": true,
"x": 206,
"y": 75,
"rotation": 0,
"scaleX": 1,
"scaleY": 1,
"offsetX": 0,
"offsetY": 0,
"skewX": 0,
"skewY": 0
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "red",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
}
]
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
}
]
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": []
}
]
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
},
{
"attrs": {
"draggable": true,
"x": 206,
"y": 75,
"rotation": 0,
"scaleX": 1,
"scaleY": 1,
"offsetX": 0,
"offsetY": 0,
"skewX": 0,
"skewY": 0
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "red",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
},
{
"attrs": {
"draggable": true,
"x": 206,
"y": 75,
"rotation": 0,
"scaleX": 1,
"scaleY": 1,
"offsetX": 0,
"offsetY": 0,
"skewX": 0,
"skewY": 0
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "red",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
}
]
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
}
]
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": []
}
]
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
},
{
"attrs": {
"draggable": true,
"x": 206,
"y": 75,
"rotation": 0,
"scaleX": 1,
"scaleY": 1,
"offsetX": 0,
"offsetY": 0,
"skewX": 0,
"skewY": 0
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "red",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
},
{
"attrs": {
"draggable": true,
"x": 206,
"y": 75,
"rotation": 0,
"scaleX": 1,
"scaleY": 1,
"offsetX": 0,
"offsetY": 0,
"skewX": 0,
"skewY": 0
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "red",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
}
]
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
}
]
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": []
}
]
在使用stage.add（layer）的addnode函数中，我似乎遇到了问题；添加新的形状组。如果能以不同的方式将新组添加到一个层中，我将不胜感激，因为我对kineticjs还相当陌生。因此，在写下这个问题后，重写整个问题，在进一步调查后添加另一个编辑，我确实发现了我的问题，我想与大家分享一下： 在addnode函数中，我调用了
stage.add（layer）现在我删除了从addNode到我的
init（）stage.add（layer）layer.add（nodeGroup）；layer.draw（）stage.add（layer）现在，我将addNode中的
stage.add（layer）init（）layer.add（nodeGroup）；layer.draw（）