2013-02-12 343 views
2

任何人都可以告诉我如何使用kinetic.js隐藏锚点在画布上,并显示锚点,每当我们点击图像。 例如check this link我们可以隐藏锚点。 我已经完成了应用程序,因为我需要在点击画布后隐藏锚点,我可以拍摄任何图像,并可以拖放,放大,重新调整大小并将它们保存为图像。 我试图隐藏锚但不成功,任何人可以提前引导我。如何隐藏锚点和显示锚点,只要我们点击图片

回答

2

这不是一个完整的解决方案,但我们来看一看:http://jsfiddle.net/n9FLA/1/

你想要做的是把事件处理程序,让您从组中添加或删除锚点。纵观链接你提供你应该做样改变:

yodaGroup.on('mouseover', function(){ 
     addAnchor(yodaGroup, yodaImg.getX(), yodaImg.getY(), 'topLeft'); 
     addAnchor(yodaGroup, yodaImg.getX()+yodaImg.getWidth(), yodaImg.getY(), 'topRight'); 
     addAnchor(yodaGroup, yodaImg.getX()+yodaImg.getWidth(), yodaImg.getY()+yodaImg.getHeight(), 'bottomRight'); 
     addAnchor(yodaGroup, yodaImg.getX(), yodaImg.getY()+yodaImg.getHeight(), 'bottomLeft'); 
     layer.draw(); 
    }); 
    yodaGroup.on('mouseout', function(){ 
     var yodaKids = yodaGroup.getChildren(); 
     for(var i=1; i<yodaKids.length; i++) 
       yodaKids[i].hide(); // .remove() would also work, or .destroy() 
     layer.draw(); 
    }); 

你必须结构逻辑和选择您想要的事件,但这样的方式,你可以做到这一点。

+0

我会举例,我在这个问题中要求的概念和当我们选择图像时只有锚点会显示的一样(microsoft office word)。 希望任何人都可以说出我想说的内容 – Cathy 2013-02-13 04:08:27

+0

感谢您的回复您给出的是什么工作,但我们可以使用它,而不用鼠标悬停和鼠标移动 – Cathy 2013-02-13 06:38:11

+1

是的,只需将其更改为您想要的任何事件,我使用鼠标悬停/鼠标作为示例 – SoluableNonagon 2013-02-13 14:29:44