Permalänk
Medlem

Varför tar du bort quotes? De ska vara där enligt alla specifikationer jag sett. Här är en överskådlig: http://www.json.org/
Rekommenderar återigen att du använder ett lib.

PS: du har semikolon överallt.

Visa signatur

Kom-pa-TI-bilitet

Permalänk

Jag vet att jag varken har quotes eller komman, men om jag lägger till dem så får jag felmeddelanden. När det ser ut som det gör där är det enda gången jag ens får parsern att läsa hela strängen.

{ "container" : container, "width" : 100 , "height" : 100 , "scale" : [object Object] , "dblClickWindow" : 400 , "targetShape" : undefined , "clickStart" : false , "mousePos" : undefined , "mouseDown" : false , "mouseUp" : false , "touchPos" : undefined , "touchStart" : false , "touchEnd" : false , "bufferLayer" : [object Object] , "backstageLayer" : [object Object] , "id" : 0 , "isAnimating" : false , "onFrameFunc" : undefined , "children" : [object Object] , "childrenNames" : [object Object] , "onFrame" : function (func) { this.onFrameFunc = func; } , "start" : function () { this.isAnimating = true; Kinetic.GlobalObject._handleAnimation(); } , "stop" : function () { this.isAnimating = false; Kinetic.GlobalObject._handleAnimation(); } , "draw" : function () { this._drawChildren(); } , "_stripLayer" : function (layer) { layer.context.stroke = function () {}; layer.context.fill = function () {}; layer.context.fillRect = function (x, y, width, height) {layer.context.rect(x, y, width, height);}; layer.context.strokeRect = function (x, y, width, height) {layer.context.rect(x, y, width, height);}; layer.context.drawImage = function () {}; layer.context.fillText = function () {}; layer.context.strokeText = function () {}; } , "_endDrag" : function (evt) { if (this.nodeDragging) { if (this.nodeDragging.drag.moving) { this.nodeDragging.drag.moving = false; this.nodeDragging._handleEvents("ondragend", evt); } } this.nodeDragging = undefined; } , "_prepareDrag" : function () { var that = this; this.on("mousemove touchmove", function (evt) {if (that.nodeDragging) {var pos = that.getUserPosition();if (that.nodeDragging.drag.x) {that.nodeDragging.x = pos.x - that.nodeDragging.offset.x;}if (that.nodeDragging.drag.y) {that.nodeDragging.y = pos.y - that.nodeDragging.offset.y;}that.nodeDragging.getLayer().draw();if (!that.nodeDragging.drag.moving) {that.nodeDragging.drag.moving = true;that.nodeDragging._handleEvents("ondragstart", evt);}that.nodeDragging._handleEvents("ondragmove", evt);}}, false); this.on("mouseup touchend mouseout", function (evt) {that._endDrag(evt);}); } , "setSize" : function (width, height) { var layers = this.children; for (var n = 0; n < layers.length; n++) { var layer = layers[n]; layer.getCanvas().width = width; layer.getCanvas().height = height; layer.draw(); } this.width = width; this.height = height; this.bufferLayer.getCanvas().width = width; this.bufferLayer.getCanvas().height = height; this.backstageLayer.getCanvas().width = width; this.backstageLayer.getCanvas().height = height; } , "setScale" : function (scaleX, scaleY) { var oldScaleX = this.scale.x; var oldScaleY = this.scale.y; if (scaleY) { this.scale.x = scaleX; this.scale.y = scaleY; } else { this.scale.x = scaleX; this.scale.y = scaleX; } var layers = this.children; var that = this; function scaleChildren(children) { for (var i = 0; i < children.length; i++) { var child = children[i]; child.x *= that.scale.x / oldScaleX; child.y *= that.scale.y / oldScaleY; if (child.children) { scaleChildren(child.children); } } } scaleChildren(layers); } , "getScale" : function () { return this.scale; } , "clear" : function () { var layers = this.children; for (var n = 0; n < layers.length; n++) { layers[n].clear(); } } , "toDataURL" : function (callback) { var bufferLayer = this.bufferLayer; var bufferContext = bufferLayer.getContext(); var layers = this.children; function addLayer(n) { var dataURL = layers[n].getCanvas().toDataURL(); var imageObj = new Image; imageObj.onload = function () {bufferContext.drawImage(this, 0, 0);n++;if (n < layers.length) {addLayer(n);} else {callback(bufferLayer.getCanvas().toDataURL());}}; imageObj.src = dataURL; } bufferLayer.clear(); addLayer(0); } , "remove" : function (layer) { this.container.removeChild(layer.canvas); this._remove(layer); } , "on" : function (typesStr, handler) { var types = typesStr.split(" "); for (var n = 0; n < types.length; n++) { var baseEvent = types[n]; this.container.addEventListener(baseEvent, handler, false); } } , "add" : function (layer) { if (layer.name) { this.childrenNames[layer.name] = layer; } layer.canvas.width = this.width; layer.canvas.height = this.height; this._add(layer); layer.draw(); this.container.appendChild(layer.canvas); } , "_handleEvent" : function (evt) { if (!evt) { evt = window.event; } this._setMousePosition(evt); this._setTouchPosition(evt); var backstageLayer = this.backstageLayer; var backstageLayerContext = backstageLayer.getContext(); var that = this; backstageLayer.clear(); var targetFound = false; function detectEvent(shape) { shape._draw(backstageLayer); var pos = that.getUserPosition(); var el = shape.eventListeners; if (that.targetShape && shape.id === that.targetShape.id) { targetFound = true; } if (shape.visible && pos !== undefined && backstageLayerContext.isPointInPath(pos.x, pos.y)) { if (that.mouseDown) { that.mouseDown = false; that.clickStart = true; shape._handleEvents("onmousedown", evt); return true; } else if (that.mouseUp) { that.mouseUp = false; shape._handleEvents("onmouseup", evt); if (that.clickStart) { if (that.nodeDragging && !that.nodeDragging.drag.moving || !that.nodeDragging) { shape._handleEvents("onclick", evt); if (shape.inDoubleClickWindow) { shape._handleEvents("ondblclick", evt); } shape.inDoubleClickWindow = true; setTimeout(function () {shape.inDoubleClickWindow = false;}, that.dblClickWindow); } } return true; } else if (that.touchStart) { that.touchStart = false; shape._handleEvents("touchstart", evt); if (el.ondbltap && shape.inDoubleClickWindow) { var events = el.ondbltap; for (var i = 0; i < events.length; i++) { events[i].handler.apply(shape, [evt]); } } shape.inDoubleClickWindow = true; setTimeout(function () {shape.inDoubleClickWindow = false;}, that.dblClickWindow); return true; } else if (that.touchEnd) { that.touchEnd = false; shape._handleEvents("touchend", evt); return true; } else if (el.touchmove) { shape._handleEvents("touchmove", evt); return true; } else if (!that.targetShape || !targetFound && shape.id !== that.targetShape.id) { if (that.targetShape) { var oldEl = that.targetShape.eventListeners; if (oldEl) { that.targetShape._handleEvents("onmouseout", evt); } } that.targetShape = shape; shape._handleEvents("onmouseover", evt); return true; } else { shape._handleEvents("onmousemove", evt); return true; } } else if (that.targetShape && that.targetShape.id === shape.id) { that.targetShape = undefined; shape._handleEvents("onmouseout", evt); return true; } return false; } function traverseChildren(obj) { var children = obj.children; for (var i = children.length - 1; i >= 0; i--) { var child = children[i]; if (child.className === "Shape") { var exit = detectEvent(child); if (exit) { return true; } } else { traverseChildren(child); } } return false; } for (var n = this.children.length - 1; n >= 0; n--) { var layer = this.children[n]; if (layer.visible && n >= 0 && layer.isListening) { if (traverseChildren(layer)) { n = -1; } } } } , "_listen" : function () { var that = this; this.container.addEventListener("mousedown", function (evt) {that.mouseDown = true;that._handleEvent(evt);}, false); this.container.addEventListener("mousemove", function (evt) {that.mouseUp = false;that.mouseDown = false;that._handleEvent(evt);}, false); this.container.addEventListener("mouseup", function (evt) {that.mouseUp = true;that.mouseDown = false;that._handleEvent(evt);that.clickStart = false;}, false); this.container.addEventListener("mouseover", function (evt) {that._handleEvent(evt);}, false); this.container.addEventListener("mouseout", function (evt) {that.mousePos = undefined;}, false); this.container.addEventListener("touchstart", function (evt) {evt.preventDefault();that.touchStart = true;that._handleEvent(evt);}, false); this.container.addEventListener("touchmove", function (evt) {evt.preventDefault();that._handleEvent(evt);}, false); this.container.addEventListener("touchend", function (evt) {evt.preventDefault();that.touchEnd = true;that._handleEvent(evt);}, false); } , "getMousePosition" : function (evt) { return this.mousePos; } , "getTouchPosition" : function (evt) { return this.touchPos; } , "getUserPosition" : function (evt) { return this.getTouchPosition() || this.getMousePosition(); } , "_setMousePosition" : function (evt) { var mouseX = evt.clientX - this._getContainerPosition().left + window.pageXOffset; var mouseY = evt.clientY - this._getContainerPosition().top + window.pageYOffset; this.mousePos = {x: mouseX, y: mouseY}; } , "_setTouchPosition" : function (evt) { if (evt.touches !== undefined && evt.touches.length === 1) { var touch = evt.touches[0]; var touchX = touch.clientX - this._getContainerPosition().left + window.pageXOffset; var touchY = touch.clientY - this._getContainerPosition().top + window.pageYOffset; this.touchPos = {x: touchX, y: touchY}; } } , "_getContainerPosition" : function () { var obj = this.container; var top = 0; var left = 0; while (obj && obj.tagName !== "BODY") { top += obj.offsetTop; left += obj.offsetLeft; obj = obj.offsetParent; } return {top: top, left: left}; } , "getContainer" : function () { return this.container; } , "getStage" : function () { return this; } , "getTargetShape" : function () { return this.targetShape; } , "_setChildrenIndices" : function () { if (this.className === "Stage") { var canvases = this.container.childNodes; var bufferCanvas = canvases[0]; var backstageCanvas = canvases[1]; this.container.innerHTML = ""; this.container.appendChild(bufferCanvas); this.container.appendChild(backstageCanvas); } for (var n = 0; n < this.children.length; n++) { this.children[n].index = n; if (this.className === "Stage") { this.container.appendChild(this.children[n].canvas); } } } , "_drawChildren" : function () { var children = this.children; for (var n = 0; n < children.length; n++) { var child = children[n]; if (child.className === "Shape") { child._draw(child.getLayer()); } else { child._draw(); } } } , "getChildren" : function () { return this.children; } , "getChild" : function (name) { return this.childrenNames[name]; } , "_add" : function (child) { if (child.name) { this.childrenNames[child.name] = child; } child.id = Kinetic.GlobalObject.idCounter++; child.index = this.children.length; child.parent = this; this.children.push(child); } , "_remove" : function (child) { if (child.name !== undefined) { this.childrenNames[child.name] = undefined; } this.children.splice(child.index, 1); this._setChildrenIndices(); child = undefined; } }

ger fel "invalid label".

Visa signatur

Stationär: Processor: Intel i5 3.2GHz, RAM: 4Gb, Grafikkort: ATI Radeon HD 5850, OS: Windows 7 Proffessional x64
Laptop: ASUS K53E, Processor: Intel i5 2450M, RAM: 4Gb, Grafik: Integrerad Intel GMA HD, OS: Win7 Home Premium x64 och Xubuntu 10

Permalänk
Medlem
Skrivet av morphman86:

Jag vet att jag varken har quotes eller komman, men om jag lägger till dem så får jag felmeddelanden. När det ser ut som det gör där är det enda gången jag ens får parsern att läsa hela strängen.

[en massa text]

ger fel "invalid label".

Du har fel redan på rad 2 när du skriver "container" : container — container är ett variabelnamn. Hur förväntar du dig att parsern ska veta vad du har tänkt ha där? Sedan har vi dina properties med [object Object] som antagligen initialt försöker tolkas som en array men failar efter som de inte är kommaseparerade. Hade de varit kommaseparerade så hade det failat ändå eftersom de då refererar till variabler som inte finns.

Om du ska bygga en JSON-serialiserare så är ett grundkrav att du förstår vad du försöker göra.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Avstängd

Om jag fattar ditt användarfall korrekt så ser DIN datastruktur ut typ såhär, med lite json pseudo kod

[{ bild, size, pos }]

Jag frågar igen,
Du tycker inte en enklare lösning vore en egen datormodel som du mappar förändringarna mot och sedan sparar och laddar in vid senare tillfälle?

Visa signatur
Permalänk
Skrivet av CyberVillain:

Om jag fattar ditt användarfall korrekt så ser DIN datastruktur ut typ såhär, med lite json pseudo kod

[{ bild, size, pos }]

Jag frågar igen,
Du tycker inte en enklare lösning vore en egen datormodel som du mappar förändringarna mot och sedan sparar och laddar in vid senare tillfälle?

Då frågar jag igen: Har du lite mer info om datamodeller? Jag är, som du säkert märkt, något av en n00b inom webbutveckling och har bara ett halvår av en 2.5års utbildning i ryggen.

Visa signatur

Stationär: Processor: Intel i5 3.2GHz, RAM: 4Gb, Grafikkort: ATI Radeon HD 5850, OS: Windows 7 Proffessional x64
Laptop: ASUS K53E, Processor: Intel i5 2450M, RAM: 4Gb, Grafik: Integrerad Intel GMA HD, OS: Win7 Home Premium x64 och Xubuntu 10

Permalänk
Avstängd

din kod som initerar hela klabbet tar ett objekt som den använder för att återskapa den state du. Du måste även uppdatera detta objekt när du ligger till nya bilder, eller ändrar postion och storlek på bilden (Och alla andra saker man kan göra i vyn)

Visa signatur
Permalänk
Skrivet av CyberVillain:

din kod som initerar hela klabbet tar ett objekt som den använder för att återskapa den state du. Du måste även uppdatera detta objekt när du ligger till nya bilder, eller ändrar postion och storlek på bilden (Och alla andra saker man kan göra i vyn)

Det jag har här är bara en testfil, där jag valde ett fast rect-element i ett lager i första stagen... där allt skall implementeras sedan finns funktioner och metoder som tar hand om alla sådana uppdateringar redan.

Visa signatur

Stationär: Processor: Intel i5 3.2GHz, RAM: 4Gb, Grafikkort: ATI Radeon HD 5850, OS: Windows 7 Proffessional x64
Laptop: ASUS K53E, Processor: Intel i5 2450M, RAM: 4Gb, Grafik: Integrerad Intel GMA HD, OS: Win7 Home Premium x64 och Xubuntu 10

Permalänk
Avstängd

Koden måste klara av att återskapa staten på vyn från en simpel datastruktur som på ett enkelt sätt går att json serialisera...

Visa signatur
Permalänk
Skrivet av CyberVillain:

Koden måste klara av att återskapa staten på vyn från en simpel datastruktur som på ett enkelt sätt går att json serialisera...

Hur uppnår man det?
Jag kan ju som sagt inte så mycket, men jag trodde funktionen jag skrev skulle dekonstruera alla underobjekt också, inte bara huvudobjektet... kanske måste ha en för varje objekt som finns i stage1 också?
Funderade på att gå väldigt djupt och slänga in minsta linje ritad manuellt i json'en och sedan rekonstruera på samma sätt, istället för att försöka få funktionen att göra det automatiskt, men det kan bli krångligt senare, i huvudprogrammet vet jag ju inte hur många objekt det kommer bli för varje enskild körning av appen.

Visa signatur

Stationär: Processor: Intel i5 3.2GHz, RAM: 4Gb, Grafikkort: ATI Radeon HD 5850, OS: Windows 7 Proffessional x64
Laptop: ASUS K53E, Processor: Intel i5 2450M, RAM: 4Gb, Grafik: Integrerad Intel GMA HD, OS: Win7 Home Premium x64 och Xubuntu 10

Permalänk
Avstängd

Låt oss ta ditt enkla exempel med rect.

din kod
var rect = new Kinetic.Rect({
x: 10,
y: 10,
width: 80,
height: 80,
fill: "red",
stroke: "black",
strokeWidth: 5
});

Välj ut vad som är statisk data och vad som är dynamisk data, lagra det dynamsiak datat i ett objekt, sedan måste du lyssna på när dessa dynamiska fält ändras och uppdatera din modell, det får du googla fram själv för jag har ingne aning om hur KinectJS fungerar

Om vi använder din rektangelkod ovan så typ

MyApp.SomeClassName = function(model) { this.stage = new Kinetic.Stage("container", 100, 100); this.layer = new Kinetic.Layer(); for(var index in model.rectangles) { var data = model.rectangles[index]; var rect = new Kinetic.Rect({ x: data.x, y: data.y, width: data.width, height: data.height, fill: "red", stroke: "black", strokeWidth: 5, onChange: function(e) { // Pseudo kod data.x = e.x; data.y = e.y; //osv } }); this.layer.add(rect); this.stage.add(layer); } }

Visa signatur
Permalänk

Det där ser ju ganska logiskt ut och kommer nog att användas. Dock har jag äntligen fått min json att funka... nästan.

Den ser ju fortfarande alla parametrar som har object i sig som [object Object] och jag vill att funktionen skall leta en nivå längre när den stöter på det, men jag vet inte hur jag skall hitta objektet som den refererar till... Här är den toJson jag har nu, den kommenterade raden får en oändlig recurse eftersom den kommer dit, kör sig själv och kommer dit direkt igen.

function toJson(Stage){ var list = []; if (Stage instanceof Array) { for (var i=0;i < Stage.length;i++) { var stringTxt = "" + Stage[i]; list.push(stringTxt); } return '[' + list.join(',') + ']'; } else { for (var prop in Stage) { var sProp = "" + Stage[prop]; if(prop == "container"){ var stringTxt = '"' + prop + '" : "container"'; list.push(stringTxt); } else if(prop == "className"){ } else if(Stage[prop] == "[object Object]"){ //How do I get the oject it's reffering to? toJson(Stage[prop]); } else if(Stage[prop] == undefined){ var stringTxt = '"' + prop + '" : 0'; list.push(stringTxt); } else if(sProp.contains("function")){ var stringTxt = '"' + prop + '" : 0'; list.push(stringTxt); } else { var stringTxt = '"' + prop + '" : ' + Stage[prop] + ''; list.push(stringTxt); } } return '{' + list.join(',') + '}'; } }

Visa signatur

Stationär: Processor: Intel i5 3.2GHz, RAM: 4Gb, Grafikkort: ATI Radeon HD 5850, OS: Windows 7 Proffessional x64
Laptop: ASUS K53E, Processor: Intel i5 2450M, RAM: 4Gb, Grafik: Integrerad Intel GMA HD, OS: Win7 Home Premium x64 och Xubuntu 10

Permalänk
Avstängd

Du inser väll att du kommer stöta på samma cirkulära problem som den inbyggda json serilisatorn?

Visa signatur
Permalänk
Skrivet av CyberVillain:

Du inser väll att du kommer stöta på samma cirkulära problem som den inbyggda json serilisatorn?

Om jag inte hittar en väg runt detta inbyggda fel... vilket är orsaken till varför jag gör en egen. Det måste ju finnas något sätt att gå ett steg längre utan att gå i en cirkel. Jag märkte att många av dessa underobjekt var tomma, om jag rensar bort dem, så är det bara lagret och shapen kvar, så det borde ju gå att ta ett steg längre och kolla genom dem, så man får in dem i json'en utan att den vill kolla stage igen.

Visa signatur

Stationär: Processor: Intel i5 3.2GHz, RAM: 4Gb, Grafikkort: ATI Radeon HD 5850, OS: Windows 7 Proffessional x64
Laptop: ASUS K53E, Processor: Intel i5 2450M, RAM: 4Gb, Grafik: Integrerad Intel GMA HD, OS: Win7 Home Premium x64 och Xubuntu 10

Permalänk
Avstängd

Nu har jag inte tittat på API:et men jag tror det kan vara riktigt svårt att få Kiniect-motorn till korrekt state på detta sätt... Berätta gärna om du lyckas...

Visa signatur
Permalänk
Skrivet av CyberVillain:

Nu har jag inte tittat på API:et men jag tror det kan vara riktigt svårt att få Kiniect-motorn till korrekt state på detta sätt... Berätta gärna om du lyckas...

Har ju inget bättre för mig innan design-templaten kommer... får nog åtminstonne en dag till att leka med det.

Visa signatur

Stationär: Processor: Intel i5 3.2GHz, RAM: 4Gb, Grafikkort: ATI Radeon HD 5850, OS: Windows 7 Proffessional x64
Laptop: ASUS K53E, Processor: Intel i5 2450M, RAM: 4Gb, Grafik: Integrerad Intel GMA HD, OS: Win7 Home Premium x64 och Xubuntu 10