search

ericdrowell / KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://www.kineticjs.com
3.98k stars 753 forks source link

Error in loading the stage #877

Closed SivaDCI closed 10 years ago

SivaDCI commented 10 years ago

Hi All, I am getting the following error when loading stage

TypeError: Kinetic[f] is not a constructor

I am using following kineticjs files kinetic-v5.0.1.js kinetic-v5.0.1.min.js

In following code I am going to save the drawn shapes value into json using stage.toJSON(); and then to database and again reload shapes in to stage using stage = Kinetic.Node.create(json, 'toImage'); when reload stage I got the error i was mentioned previously.

Here My code

var mY = 0; var cY = 0; var lx = 0; var ly = 0; var images = {}; var canvas; var group = new Array(); var drawingObject; var groupCount = 0; var layer = new Kinetic.Layer(); var stage; var draggedLine, initialX, initialY; var comment; var img; var base64String; var count = 0; var draggedLine, initialX, initialY; var radius = 25; var isDragging = false; var layerImage = new Kinetic.Layer(); function goBack() { window.history.back(); } $(document).ready(function () { $("#g_line").hide(); $("#g_rect").hide(); $("#g_circle").hide(); $("#g_text").hide(); $("#g_select").hide(); $("#g_delete").hide(); $("#g_clear").hide(); $("#g_save").hide(); stage = new Kinetic.Stage({ container: 'toImage', width: 747, height: 450 }); var imageObj = new Image();

$('#Loader').css('display', 'block');
jQuery.ajax({
    url: "ConsultantReply.aspx/getImage",
    type: "POST",
    data: "{ }",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        //debugger;
        objimage = data.d;
        //alert(objimage.status);
        image = objimage.image;
        base64String = 'images' + objimage.image;
        //imageObj.src = 'data:image/png;base64,' + objimage.image;
        $("#imgeye").attr("src", base64String);
        /*div = document.getElementById("toImage");
        div.style.backgroundImage = "url('" + base64String + "')";*/
        if (objimage.status == 0) {
            status = 1;
            var imageObj = new Image();
            imageObj.src = base64String;
            imageObj.onload = function () {
                var imgGroup = new Kinetic.Group({
                    x: 0,
                    y: 0,
                    draggable: false,
                    id: 'imgG'
                });
                layerImage.add(imgGroup);
                var yoda = new Kinetic.Image({
                    x: 10,
                    y: 10,
                    image: imageObj,
                    width: 747,
                    height: 450
                });
                // add the shape to the layer
                imgGroup.add(yoda);
                // add the layer to the stage
                stage.add(layerImage);
                layerImage.moveToBottom();
                stage.draw();
            };
            //base64String = 'data:image/png;base64,' + objimage.image;
            //$('#toImage').css("background-image", "url(" + base64String + ")");
            //$('#toImage').css("background-image", "url(" + base64String + ")");
            //document.getElementById('toImage').style.backgroundImage = "url(" + base64String + ")";
            /*var imageObj = new Image();
            imageObj.src = 'images/banner2.jpg';
            imageObj.onload = function () {
            var imgGroup = new Kinetic.Group({
            x: 0,
            y: 0,
            draggable: false,
            id: 'imgG'
            });
            layer.add(imgGroup);

            var yoda = new Kinetic.Image({
            x: 10,
            y: 10,
            image: imageObj,
            width: 747,
            height: 450
            });

            // add the shape to the layer
            imgGroup.add(yoda);

            // add the layer to the stage
            stage.add(layer);
            stage.draw();
            };*/

        }
        else {
            json = objimage.ModifiedImage;
            //alert(json);
            status = 2;
            //$('#toImage').css("background-image", "url(" + base64String + ")");
            var imageObj = new Image();
            imageObj.src = base64String;
            imageObj.onload = function () {

                var imgGroup = new Kinetic.Group({
                    x: 0,
                    y: 0,
                    draggable: false,
                    id: 'imgG'
                });
                layerImage.add(imgGroup);

                var yoda = new Kinetic.Image({
                    x: 10,
                    y: 10,
                    image: imageObj,
                    width: 747,
                    height: 450
                });

                // add the shape to the layer
                imgGroup.add(yoda);

                // add the layer to the stage
                stage.add(layerImage);
                stage.draw();
                layerImage.moveToBottom()
            };

            stage = Kinetic.Node.create(json, 'toImage');
        }

        $('#Loader').css('display', 'none');
    },
    error: function () {
        $('#Loader').css('display', 'none');
        jAlert("Please try again later");
        status = -1;

    }
});
$("#btnrectangle").click(function (e) {
    $(this).css("background-color", "#FFE88C");
    $("#btnline").css("background-color", "");
    $("#btncircle").css("background-color", "");
    $("#btntext").css("background-color", "");
    $("#btnselect").css("background-color", "");
    $("#btndelete").css("background-color", "");
    $("#btnclearall").css("background-color", "");
    $("#btnsaveas").css("background-color", "");
    $("#g_line").hide();
    $("#g_rect").show();
    $("#g_circle").hide();
    $("#g_text").hide();
    $("#g_select").hide();
    $("#g_delete").hide();
    $("#g_clear").hide();
    $("#g_save").hide();
    drawingObject = "rectangle";
});
$("#btnline").click(function (e) {
    $(this).css("background-color", "#FFE88C");
    $("#btnrectangle").css("background-color", "");
    $("#btncircle").css("background-color", "");
    $("#btntext").css("background-color", "");
    $("#btnselect").css("background-color", "");
    $("#btndelete").css("background-color", "");
    $("#btnclearall").css("background-color", "");
    $("#btnsaveas").css("background-color", "");
    $("#g_line").show();
    $("#g_rect").hide();
    $("#g_circle").hide();
    $("#g_text").hide();
    $("#g_select").hide();
    $("#g_delete").hide();
    $("#g_clear").hide();
    $("#g_save").hide();
    drawingObject = "line";

});

$("#btncircle").click(function (e) {
    $(this).css("background-color", "#FFE88C");
    $("#btnrectangle").css("background-color", "");
    $("#btnline").css("background-color", "");
    $("#btntext").css("background-color", "");
    $("#btnselect").css("background-color", "");
    $("#btndelete").css("background-color", "");
    $("#btnclearall").css("background-color", "");
    $("#btnsaveas").css("background-color", "");
    $("#g_line").hide();
    $("#g_rect").hide();
    $("#g_circle").show();
    $("#g_text").hide();
    $("#g_select").hide();
    $("#g_delete").hide();
    $("#g_clear").hide();
    $("#g_save").hide();
    drawingObject = "circle";

});

$("#btntext").click(function (e) {

    $("#g_line").hide();
    $("#g_rect").hide();
    $("#g_circle").hide();
    $("#g_text").show();
    $("#g_select").hide();
    $("#g_delete").hide();
    $("#g_clear").hide();
    $("#g_save").hide();
    $(this).css("background-color", "#FFE88C");
    $("#btnrectangle").css("background-color", "");
    $("#btnline").css("background-color", "");
    $("#btncircle").css("background-color", "");
    $("#btnselect").css("background-color", "");
    $("#btnclearall").css("background-color", "");
    $("#btndelete").css("background-color", "");
    $("#btnsaveas").css("background-color", "");
    //$("#dialogcomment").dialog("open");
    drawingObject = "text";
    comment = prompt("Please enter your Text", "Text");
    //$("#consultantcomment").dialog("open");

});
$("#btnselect").click(function (e) {

    $("#g_line").hide();
    $("#g_rect").hide();
    $("#g_circle").hide();
    $("#g_text").hide();
    $("#g_select").show();
    $("#g_delete").hide();
    $("#g_clear").hide();
    $("#g_save").hide();
    $(this).css("background-color", "#FFE88C");
    $("#btnrectangle").css("background-color", "");
    $("#btnline").css("background-color", "");
    $("#btncircle").css("background-color", "");
    $("#btntext").css("background-color", "");
    $("#btndelete").css("background-color", "");
    $("#btnclearall").css("background-color", "");
    $("#btnsaveas").css("background-color", "");
    //$("#dialogcomment").dialog("open");
    drawingObject = "select";

});
$("#btndelete").click(function (e) {

    $("#g_line").hide();
    $("#g_rect").hide();
    $("#g_circle").hide();
    $("#g_text").hide();
    $("#g_select").hide();
    $("#g_delete").show();
    $("#g_clear").hide();
    $("#g_save").hide();
    $(this).css("background-color", "#FFE88C");
    $("#btnrectangle").css("background-color", "");
    $("#btnline").css("background-color", "");
    $("#btncircle").css("background-color", "");
    $("#btntext").css("background-color", "");
    $("#btnselect").css("background-color", "");
    $("#btnclearall").css("background-color", "");
    $("#btnsaveas").css("background-color", "");
    //$("#dialogcomment").dialog("open");
    drawingObject = "delete";

});
$("#btnclearall").click(function (e) {

    $("#g_line").hide();
    $("#g_rect").hide();
    $("#g_circle").hide();
    $("#g_text").hide();
    $("#g_select").hide();
    $("#g_delete").hide();
    $("#g_clear").show();
    $("#g_save").hide();
    $(this).css("background-color", "#FFE88C");
    $("#btnrectangle").css("background-color", "");
    $("#btnline").css("background-color", "");
    $("#btncircle").css("background-color", "");
    $("#btntext").css("background-color", "");
    $("#btnselect").css("background-color", "");
    $("#btndelete").css("background-color", "");
    $("#btnsaveas").css("background-color", "");
    drawingObject = "clearAll";

});
$("#btnsaveas").click(function (e) {

    $("#g_line").hide();
    $("#g_rect").hide();
    $("#g_circle").hide();
    $("#g_text").hide();
    $("#g_select").hide();
    $("#g_delete").hide();
    $("#g_clear").hide();
    $("#g_save").show();
    $(this).css("background-color", "#FFE88C");
    $("#btnrectangle").css("background-color", "");
    $("#btnline").css("background-color", "");
    $("#btncircle").css("background-color", "");
    $("#btntext").css("background-color", "");
    $("#btnselect").css("background-color", "");
    $("#btndelete").css("background-color", "");
    $("#btnclearall").css("background-color", "");
    drawingObject = "";
    saveCanvas();

});

layer.on('mousedown', function (e) {
    var node = e.targetNode;
    deselect()
    if (drawingObject == "delete") {

        if (node.parent.nodeType = 'Kinetic.Group') {
            var children = node.parent.children;
            children.destroy();
            /*for (i = 1; i < children.length; i++) {
            children[i].destroy();
            }*/
        }
        node.destroy();
        drawingObject = "";
    }
    else if (drawingObject == "clearAll") {
        layer.destroy();
        drawingObject = "";

    }
    else {
        select(node);

    }

});
$('#toImage').on('mousedown', function (e) {
    canvas = stage.getContent().firstChild;
    fillcolor = document.getElementById('fillcolor').value; // $("#txtColor").val();
    strokecolor = document.getElementById('strokecolor').value;
    var thinkness = $("#thickness").val();
    groupid = "group" + count;
    commentId = 'shape' + count;
    if (drawingObject == "line") {
        pos = getMousePos(canvas, e);
        var mouseX = parseInt(pos.x);
        var mouseY = parseInt(pos.y);
        draggedLine = newLine(mouseX, mouseY);
        isDragging = true;
    }
    if (drawingObject == "circle") {
        pos = getMousePos(canvas, e);
        var mouseX = parseInt(pos.x);
        var mouseY = parseInt(pos.y);
        draggedCircle = newCircle(mouseX, mouseY);
        isDragging = true;
    }
    if (drawingObject == "rectangle") {
        var posX = $(this).offset().left;
        posY = $(this).offset().top;
        group = new Kinetic.Group({
            x: e.pageX,
            y: e.pageY - posY,
            draggable: true
        });
        layer.add(group);
        var pos = getMousePos(canvas, e);
        posx = pos.x;
        posy = pos.y;
        var thinkness = $("#thickness").val();
        var rect = new Kinetic.Rect({
            x: 0,
            y: 0,
            width: 100,
            height: 50,
            fill: "#" + fillcolor,
            stroke: "#" + strokecolor,
            opacity: 0.3,
            strokeWidth: parseInt(thinkness),
            draggable: true,
            name: commentId
        });
        group.add(rect);
        group.on('dragstart', function () {
            this.moveToTop();
        });
        stage.add(layer);
        layer.draw();
        count++;
        drawingObject = "";

    }

});

$('#toImage').on('mousemove', function (e) {
    if (!isDragging) {
        return;
    }
    if (drawingObject == "line") {
        pos = getMousePos(canvas, e);
        var mouseX = parseInt(pos.x);
        var mouseY = parseInt(pos.y);
        var dx = mouseX - initialX;
        var dy = mouseY - initialY;
        draggedLine.setPoints([initialX, initialY, initialX + dx, initialY + dy]);
        draggedLine.namw = commentId;
        layer.add(draggedLine);
        layer.draw();
        count++;

    }
    if (drawingObject == "circle") {
        pos = getMousePos(canvas, e);
        var mouseX = parseInt(pos.x);
        var mouseY = parseInt(pos.y);
        var dx = mouseX - initialX;
        var dy = mouseY - initialY;
        var r = Math.sqrt(dx * dx + dy * dy);
        draggedCircle.setRadius(r);
        draggedCircle.name = commentId;
        layer.add(draggedCircle);
        layer.draw();
        count++;
    }
});

$('#toImage').on
        ('mouseup', function (e) {
            isDragging = false;
            drawingObject = "";
        });

}); function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; }

function newLine(mouseX, mouseY) { initialX = mouseX; initialY = mouseY; strokecolor = document.getElementById('strokecolor').value; var Line = new Kinetic.Line({ // x: initialX, //y: initialY,

    points: [initialX, initialY, initialX, initialY],
    stroke: "#" + strokecolor,
    drawborder: true,
    draggable: true,
    id: commentId
    //fill: 'green'
});

return (Line);

}

function newCircle(mouseX, mouseY) { initialX = mouseX; initialY = mouseY; fillcolor = document.getElementById('fillcolor').value; // $("#txtColor").val(); strokecolor = document.getElementById('strokecolor').value; var circle = new Kinetic.Circle({ x: initialX, y: initialY, radius: 1, fill: "#" + fillcolor, stroke: "#" + strokecolor, opacity: 0.1, draggable: true

});

return (circle);

} function ViewImage(img) { var id = img.id;

var imgdata = document.getElementById('' + id + '').src;
$("#filterImage").attr("src", imgdata);
$('#filterview').css('display', 'block');

}

function HideImage() { $('#filterview').css('display', 'none'); }

function ChangePixel() { var red = $("#chbred").prop('checked') ? true : false; var green = $("#chbgreen").prop('checked') ? true : false; var blue = $("#chbblue").prop('checked') ? true : false; var jsondata = "{'base64string':" + "'" + base64String + "'" + ",'red':" + red + ",'green':" + green + ",'blue':" + blue + "}"; $('#Loader').css('display', 'block'); jQuery.ajax({ url: "ConsultantReply.aspx/colorchange", type: "POST", data: jsondata, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { var result = data.d; imgbase64String = result; //imageObj.src = 'data:image/png;base64,' + objimage.image; $("#imgeye").attr("src", imgbase64String);

        $('#Loader').css('display', 'none');
    },
    error: function () {
        jAlert("Please try again later. RGB CALL");
        $('#Loader').css('display', 'none');
    }
});

} function convert() { img = $('.kineticjs-content').find('canvas').get(0).toDataURL("image/png"); }

function divtoImage() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");

var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml'>" +

document.getElementById('DivToImage').innerHTML +

"</div>" +
"</foreignObject>" +
"</svg>";

var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {
    type: "image/svg+xml;charset=utf-8"
});

var url = DOMURL.createObjectURL(svg);
img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;

}

function saveCanvas() { convert(); var imageData = stage.toJSON(); var imageDiv; $('#Loader').css('display', 'block'); //alert(img); stage.toDataURL({ callback: function (dataUrl) { / * here you can do anything you like with the data url. * In this tutorial we'll just open the url with the browser * so that you can see the result as an image /

        image = dataUrl.replace('data:image/png;base64,', '');
        //alert(image);
        var jsondata = "{'modifiedImage':" + "'" + imageData + "'" + ",'thumb':" + "'" + image + "'}";
        $('#Loader').css('display', 'block');
        //var jsondata = "{'modifiedImage':" + "'" + imageData + "'" + "}";
        //alert(imageDiv);
        jQuery.ajax({
            url: "ConsultantReply.aspx/upDateImage",
            type: "POST",
            data: jsondata,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {

                var result = data.d;
                if (result == 1) {
                    jAlert("Image saved.");
                }
                else {
                    jAlert("Image not saved, Please try again later.");
                }
                $('#Loader').css('display', 'none');
            },
            error: function () {

                jAlert("Please try again later.");
                $('#Loader').css('display', 'none');

            }
        });

    }
});

/* image = img.replace('data:image/png;base64,', '');
//alert(image);
var jsondata = "{'modifiedImage':" + "'" + imageData + "'" + ",'thumb':" + "'" + image + "'}";

//var jsondata = "{'modifiedImage':" + "'" + imageData + "'" + "}";
//alert(imageDiv);
jQuery.ajax({
url: "ConsultantReply.aspx/upDateImage",
type: "POST",
data: jsondata,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {

var result = data.d;
if (result == 1) {
jAlert("Image saved.");
}
else {
jAlert("Image not saved, Please try again later.");
}
$('#Loader').css('display', 'none');
},
error: function () {

jAlert("Please try again later.");
$('#Loader').css('display', 'none');

}
});*/
$('#Loader').css('display', 'none');

} function select(node) { deselect(); if (node.parent.nodeType = 'Kinetic.Group') { var name = node.getName(); if (name == "text") { var children = node.parent.children; for (i = 1; i < children.length; i++) { if (children[i].getName() == 'sizeAnchor') { children[i].show(); } } } else { var children = node.parent.children; for (i = 1; i < children.length; i++) { if (children[i].getName() == 'topLeft' || children[i].getName() == 'topRight' || children[i].getName() == 'bottomRight' || children[i].getName() == 'bottomLeft' || children[i].getName() == 'start' || children[i].getName() == 'end' || children[i].getName() == 'circleradius') { children[i].show();

            }
        }
    }
}

} function deselect() { var children = layer.children; for (i = 1; i < children.length; i++) { var grandChildren = children[i].children;

    if (grandChildren) {
        for (j = 1; j < grandChildren.length; j++) {
            if (grandChildren[j].getName() == 'topLeft' ||
                    grandChildren[j].getName() == 'topRight' ||
                    grandChildren[j].getName() == 'bottomRight' ||
                    grandChildren[j].getName() == 'bottomLeft' ||
                    grandChildren[j].getName() == 'sizeAnchor' ||
                    grandChildren[j].getName() == 'start' ||
                    grandChildren[j].getName() == 'end' ||
                    grandChildren[j].getName() == 'circleradius') {
                grandChildren[j].hide();
                layer.draw();
            }
        }
    }
}

}

I hope someone will find what mistake i have done. I am looking for some help.

Thanks in Advance, Siva.

lavrton commented 10 years ago

Too much code! Looks like you get wrong json from server. You should:

  1. Save somewhere json that you get from server
  2. Create simplest jsfiddle demo with this json
  3. Post your question to stackoverflow. (I am sure there are no KineticJS bug here)
SivaDCI commented 10 years ago

Hi Iavrton,

Thank you for your reply...

SivaDCI commented 10 years ago

Hi Iavrton,

could you plz check with following value for json and load into container

I am getting the same error again

json value is

"{\"attrs\":{\"width\":747,\"height\":450},\"className\":\"Stage\",\"children\":[{\"attrs\":{},\"className\":\"Layer\",\"children\":[{\"attrs\":{\"id\":\"imgG\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"x\":10,\"y\":10,\"width\":747,\"height\":450},\"className\":\"Image\"}]}]},{\"attrs\":{},\"className\":\"Layer\",\"children\":[{\"attrs\":{\"x\":310,\"y\":68,\"draggable\":true,\"id\":\"dvg\"},\"className\":\"Kinetic.Group\",\"children\":[{\"attrs\":{\"x\":-31,\"y\":-18,\"width\":298,\"height\":192,\"fill\":\"#FF80AA\",\"stroke\":\"#29FF4C\",\"opacity\":0.2,\"name\":\"rect\",\"listening\":true},\"className\":\"Rect\"},{\"attrs\":{\"x\":267,\"y\":-18,\"stroke\":\"#666\",\"fill\":\"#ddd\",\"radius\":8,\"name\":\"topRight\",\"opacity\":0.8,\"draggable\":true,\"dragOnTop\":false,\"id\":\"rect\",\"visible\":false},\"className\":\"Circle\"},{\"attrs\":{\"x\":-31,\"y\":174,\"stroke\":\"#666\",\"fill\":\"#ddd\",\"radius\":8,\"name\":\"bottomLeft\",\"opacity\":0.8,\"draggable\":true,\"dragOnTop\":false,\"id\":\"rect\",\"visible\":false},\"className\":\"Circle\"},{\"attrs\":{\"x\":267,\"y\":174,\"stroke\":\"#666\",\"fill\":\"#ddd\",\"radius\":8,\"name\":\"bottomRight\",\"opacity\":0.8,\"draggable\":true,\"dragOnTop\":false,\"id\":\"rect\",\"visible\":false},\"className\":\"Circle\"},{\"attrs\":{\"x\":-31,\"y\":-18,\"stroke\":\"#666\",\"fill\":\"#ddd\",\"radius\":8,\"name\":\"topLeft\",\"opacity\":0.8,\"draggable\":true,\"dragOnTop\":false,\"id\":\"rect\",\"visible\":false},\"className\":\"Circle\"}]},{\"attrs\":{\"x\":143,\"y\":117,\"draggable\":true,\"id\":\"cirG\"},\"className\":\"Kinetic.Group\",\"children\":[{\"attrs\":{\"radius\":56,\"fill\":\"#FF80AA\",\"stroke\":\"#29FF4C\",\"opacity\":0.3,\"strokeWidth\":1,\"name\":\"circle\"},\"className\":\"Circle\"},{\"attrs\":{\"stroke\":\"#666\",\"fill\":\"#ddd\",\"radius\":8,\"name\":\"circleradius\",\"opacity\":0.8,\"draggable\":true,\"dragOnTop\":false,\"id\":\"circle\",\"visible\":false},\"className\":\"Circle\"}]}]},{\"attrs\":{},\"className\":\"Layer\",\"children\":[{\"attrs\":{\"x\":310,\"y\":68,\"draggable\":true,\"id\":\"dvg\"},\"className\":\"Kinetic.Group\",\"children\":[{\"attrs\":{\"x\":-31,\"y\":-18,\"width\":298,\"height\":192,\"fill\":\"#FF80AA\",\"stroke\":\"#29FF4C\",\"opacity\":0.2,\"name\":\"rect\",\"listening\":true},\"className\":\"Rect\"},{\"attrs\":{\"x\":267,\"y\":-18,\"stroke\":\"#666\",\"fill\":\"#ddd\",\"radius\":8,\"name\":\"topRight\",\"opacity\":0.8,\"draggable\":true,\"dragOnTop\":false,\"id\":\"rect\",\"visible\":false},\"className\":\"Circle\"},{\"attrs\":{\"x\":-31,\"y\":174,\"stroke\":\"#666\",\"fill\":\"#ddd\",\"radius\":8,\"name\":\"bottomLeft\",\"opacity\":0.8,\"draggable\":true,\"dragOnTop\":false,\"id\":\"rect\",\"visible\":false},\"className\":\"Circle\"},{\"attrs\":{\"x\":267,\"y\":174,\"stroke\":\"#666\",\"fill\":\"#ddd\",\"radius\":8,\"name\":\"bottomRight\",\"opacity\":0.8,\"draggable\":true,\"dragOnTop\":false,\"id\":\"rect\",\"visible\":false},\"className\":\"Circle\"},{\"attrs\":{\"x\":-31,\"y\":-18,\"stroke\":\"#666\",\"fill\":\"#ddd\",\"radius\":8,\"name\":\"topLeft\",\"opacity\":0.8,\"draggable\":true,\"dragOnTop\":false,\"id\":\"rect\",\"visible\":false},\"className\":\"Circle\"}]},{\"attrs\":{\"x\":143,\"y\":117,\"draggable\":true,\"id\":\"cirG\"},\"className\":\"Kinetic.Group\",\"children\":[{\"attrs\":{\"radius\":56,\"fill\":\"#FF80AA\",\"stroke\":\"#29FF4C\",\"opacity\":0.3,\"strokeWidth\":1,\"name\":\"circle\"},\"className\":\"Circle\"},{\"attrs\":{\"stroke\":\"#666\",\"fill\":\"#ddd\",\"radius\":8,\"name\":\"circleradius\",\"opacity\":0.8,\"draggable\":true,\"dragOnTop\":false,\"id\":\"circle\",\"visible\":false},\"className\":\"Circle\"}]}]}]}"

lavrton commented 10 years ago

I see "className" : "Kinetic.Group", but should be `"className" : "Group" in your JSON. After fixing works fine: http://jsbin.com/dibas/1/edit

SivaDCI commented 10 years ago

I got my Issue Fixed. Thank you lavrton for your valuable guidance.

BY Siva