1
function initStage(image) {

            var stage = new Kinetic.Stage({
                container: 'loginDiv',
                width: 800,
                height: 500,
            });

            var layer = new Kinetic.Layer();

            var bg = new Kinetic.Rect({
                width: stage.getWidth(),
                height: stage.getHeight(),
                x: 0,
                y: 0
            });

            layer.add(bg);

            layer.on('mousedown', function (e) {
                var node = e.targetNode;
                select(node);
            });

            var darthVaderGroup = new Kinetic.Group({
                x: 5,
                y: 5,
                draggable: true,
                fill: 'black'
            });


            layer.add(darthVaderGroup);
            stage.add(layer);



            $("#Check_Q").click( function(){
                if( $(this).is(':checked') )
                {

                   alert("on");

                }

                else {

                   alert("off");

                }
            });



            function select(node) {
                // alert("select");
                deselect();

                if (node.parent.nodeType = 'Kinetic.Group') {
                    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() == 'rotateAnchor' ||
                            children[i].getName() == 'bottomLeft') {
                            children[i].show();

                        }
                    }
                }
            }

            function deselect() {

                // alert("de-select");
                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() == 'rotateAnchor' ||
                                grandChildren[j].getName() == 'bottomLeft') {
                                grandChildren[j].hide();
                                layer.draw();
                            }
                        }
                    }
                }
            }

            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");

            var img = new Image();
            // img.onload = start;
            img.crossOrigin = "anonymous";
            img.src = image;
            // alert(img.src);


            // draw the star image to the offscreen canvas
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);

            var darthVaderImg = new Kinetic.Image({
                x: 0,
                y: 0,
                //image: document.getElementById("photoCanvas").getContext("2d").toImageURL(),
                //image: image.darthVader,
                image: canvas,
                // draggable: true,
                width: 780,
                height: 480,
                name: 'image',
                stroke: '#F8F0F0',
                strokeWidth: 7, 
                fill: '#F8F0F0' 

            });

            darthVaderGroup.add(darthVaderImg);
            addAnchor(darthVaderGroup, 0, 0, 'topLeft', 'none');
            addAnchor(darthVaderGroup, darthVaderImg.getWidth(), 0, 'topRight', 'none');
            addAnchor(darthVaderGroup, darthVaderImg.getWidth(), darthVaderImg.getHeight(), 'bottomRight', 'none');
            addAnchor(darthVaderGroup, 0, darthVaderImg.getHeight(), 'bottomLeft', 'none');
            addAnchor(darthVaderGroup, darthVaderImg.getWidth() / 2, darthVaderImg.getHeight() / 2, 'rotateAnchor', 'rotate');

            darthVaderGroup.on('dragstart', function () {
                this.moveToTop();
            });
            // layer.add(darthVaderImg);
            // layer.draw();
            stage.draw();



            // create an offscreen canvas

            var filters_k = $('#filters_k li a, #filters1_k li a, #filters2_k li a, #filters3_k li a, #filters4_k li a');

            filters_k.click(function (e) {


                //  alert("vaagi");

                //  $('.k_submenu').css({'display':'visible'});

                e.preventDefault();

                //layer.clear();



                var f = $(this);

                //if (f.is('.active')) {
                //    // Apply filters only once
                //    return false;
                //}

                filters_k.removeClass('active');
                f.addClass('active');
                var effect = $.trim(f[0].id);
                // layer.draw();
                Caman(canvas, function () {

                    if (effect in this) {

                        this.revert(false);
                        this[effect]();
                        this.render();
                        // layer.draw();
                        stage.draw();

                    }

                });
            });  

            document.getElementById('facebook_post').addEventListener('click', function() {

                var FB_CMNT = prompt("Please Write Your Comment To Share On Facebook!");

                stage.toDataURL({
                    callback: function(image) {
                        try{

                            fbkd(image,FB_CMNT);

                            function fbkd(image,FB_CMNT){

                                var authToken;
                                FB.login(function (response) {
                                    if (response.authResponse) {
                                        var access_token =   FB.getAuthResponse()['accessToken'];
                                        authToken = access_token;
                                        alert("authtkn---"+authToken);
                                        Login(image, authToken,FB_CMNT);
                                        // k_loading();
                                    } else {

                                    }
                                }, {
                                    scope: 'publish_actions,publish_stream'
                                });

                            }

                            function dataURItoBlob(dataURI) {
                                var byteString = atob(dataURI.split(',')[1]);
                                var ab = new ArrayBuffer(byteString.length);
                                var ia = new Uint8Array(ab);

                                for (var i = 0; i < byteString.length; i++) {
                                    ia[i] = byteString.charCodeAt(i);
                                }

                                var blob = new Blob([ia]);

                                return blob;
                            } // Create Base64 to upload on facebook

                            function Login(image,authToken,FB_CMNT)
                            {
                                try {
                                    blob = dataURItoBlob(image);
                                } catch (e) {
                                    alert(e);
                                }   
                                var fd = new FormData();
                                fd.append("access_token", authToken);
                                fd.append("source", blob);
                                fd.append("message", FB_CMNT+ " - https://play.google.com/store/apps/details?id=com.skyproductivity.android.cellphonetracker&hl=en");

                                try {
                                    $.ajax({
                                        url: "https://graph.facebook.com/me/photos?access_token=" + authToken,
                                        type: "POST",
                                        data: fd,
                                        processData: false,
                                        contentType: false,
                                        cache: false,

                                        success: function (data) {
                                            // alert("success " + data);
                                        },

                                        error: function (shr, status, data) {
                                            alert("error " + data + " Status " + shr.status);
                                        },
                                        complete: function () {
                                            k_loading_hide();
                                            alert("Successfully Shared On Facebook");
                                        }
                                    });

                                } catch (e) {
                                    console.log(e);
                                }

                            } // Login & Auth Check for facebook

                        }catch(e){alert(e)}
                    }

                });   

            });

            var filters = [];
            $(".FilterSetting input").each(function () {
                filters.push({
                    "name": $(this).data("filter"),
                    "value": $(this).val()
                });
            });
            $("#Filters").on("mouseup", ".FilterSetting input", function () {
                var filter = $(this).data("filter");
                var value = $(this).val();
                // $(this).parent().parent().find(".FilterValue").children("label").html(value);
                for (var i = 0; i < filters.length; i++) {
                    //alert(filters.length);
                    if (filters[i].name == filter) {
                        filters[i].value = value;

                    }
                }

                changeImageFeatures();
            });

            function changeImageFeatures() {

                var brightnessValue = filters[0].value;
                var saturationValue = filters[1].value;
                var exposureValue = filters[2].value;
                var sepiaValue = filters[3].value;
                var noiseValue = filters[4].value;
                var sharpenValue = filters[5].value;
                // var contrastValue = filters[6].value;
                var vibranceValue = filters[7].value;
                var hueValue = filters[8].value;
                //  var gammaValue = filters[9].value;
                var clipValue = filters[10].value;


                Caman(canvas, function () { 

                    this.revert(false);
                    this.brightness(brightnessValue);
                    this.saturation(saturationValue);
                    this.exposure(exposureValue);
                    this.sepia(sepiaValue);
                    this.noise(noiseValue);
                    this.sharpen(sharpenValue);
                    //  this.contrast(contrastValue);
                    this.vibrance(vibranceValue);
                    this.hue(hueValue);
                    // this.gamma(gammaValue);
                    this.clip(clipValue);
                    this.render();    

                });           
            }  
        }

[我正在尝试在选定的复选框上使用该 select(node) 功能]

  $("#Check_Q").click( function(){
                if( $(this).is(':checked') )
                {

                   alert("on");

                }

                else {

                   alert("off");

                }
            });

[我正在创建网站以更新照片并在 facebook 上分享,但由于我从 stackoverflow 获得了帮助并且确实喜欢这样做,但无法通过复选框选择删除所有锚点]

[请帮忙]

[提前非常感谢]

4

1 回答 1

0

演示:http: //jsfiddle.net/m1erickson/ebdD8/

name首先在 addAnchor 函数中给每个锚一个类属性:

var anchor = new Kinetic.Circle({
    name:"anchor",
    ...
});

然后在您的组合的点击事件中,您可以找到所有名为“anchor”的对象并切换它们的可见性:

$("#Check_Q").click( function(){

        aAnchors=stage.find(".anchor").each(function(anchor){
            anchor.visible(!anchor.isVisible());
        });
        layer.draw();

});
于 2014-07-26T16:12:34.870 回答