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();
});
}
}
[我正在尝试在所选复选框上使用该选择（节点）功能]
$("#Check_Q").click( function(){
if( $(this).is(':checked') )
{
alert("on");
}
else {
alert("off");
}
});
[我正在创建网站以更新照片并在Facebook上分享，但因为我从stackoverflow获得了帮助并且确实喜欢这样但却无法通过复选框选择删除所有锚点]
[请帮助]
[非常感谢]
答案 0 :(得分：0)
演示：http://jsfiddle.net/m1erickson/ebdD8/
首先在addAnchor函数中为每个锚提供一个类name属性：
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();
});