KineticJS组
KineticJS组
提问于 2013-05-24 23:14:31
我正在用HTML5制作一个交互式的世界地图。我正在使用KineticJS创建国家的多边形，目前我有澳大利亚和新西兰。然而，我想要它，因此，如果鼠标在澳大利亚或新西兰，他们都将突出显示。我不知道如何在KineticJS中使用组，但这是我尝试的方法(我使用省略号来表示点，因为有很多坐标)：
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#container {
background-image: url('world_map.png');
width: 1026px;
height: 540px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.2.min.js"> </script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 1026,
height: 540
});
var layer = new Kinetic.Layer();
var nznorth = new Kinetic.Polygon({
points: [...],
fill: '#ffffff',
stroke: 'black',
strokeWidth: 1
});
var nzsouth = new Kinetic.Polygon({
points: [...],
fill: '#ffffff',
stroke: 'black',
strokeWidth: 1
});
var ausmain = new Kinetic.Polygon({
points: [...],
fill: '#ffffff',
stroke: 'black',
strokeWidth: 1
});
var aus = new Kinetic.Group();
aus.add(ausmain);
aus.add(nznorth);
aus.add(nzsouth);
aus.on('mouseover', function() {
this.setFill('blue');
layer.draw();
});
aus.on('mouseout', function() {
this.setFill('#ffffff');
layer.draw();
});
layer.add(aus);
stage.add(layer);
</script>
</body>
</html>我应该如何在KineticJS中实现群组？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-05-25 04:38:25
你就快拥有它了！
在处理鼠标事件时，同时在澳大利亚和新西兰设置填充，而不是在组上设置填充。
group.on("mouseover",function(){
australia.setFill("blue");
newzealand.setFill("blue");
layer.draw();
console.log("over");
});
group.on("mouseout",function(){
australia.setFill("skyblue");
newzealand.setFill("skyblue");
layer.draw();
console.log("out");
});这是代码和一个提琴：http://jsfiddle.net/m1erickson/LXvkg/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
stage.draw();
var group=new Kinetic.Group();
layer.add(group);
var australia = new Kinetic.Rect({
x: 20,
y: 20,
width: 150,
height: 100,
fill: "skyblue",
stroke: "lightgray",
strokeWidth: 3
});
group.add(australia);
var newzealand = new Kinetic.Rect({
x: 250,
y: 110,
width: 20,
height: 50,
fill: "skyblue",
stroke: "lightgray",
strokeWidth: 3
});
group.add(newzealand);
layer.draw();
group.on("mouseover",function(){
australia.setFill("blue");
newzealand.setFill("blue");
layer.draw();
console.log("over");
});
group.on("mouseout",function(){
australia.setFill("skyblue");
newzealand.setFill("skyblue");
layer.draw();
console.log("out");
});
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>Stack Overflow用户
发布于 2013-05-25 04:29:38
本教程将帮助您实现动态组。
http://www.html5canvastutorials.com/kineticjs/html5-canvas-complex-shapes-using-groups-with-kineticjs/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16738297
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号