我是 kineticjs 的新手。我正在寻找一个支持可调节多边形线条形状的舞台，这些线条形状定义了可以放入物品的有效区域。
有人告诉我，我需要扩展（继承自）内置形状并添加我需要的功能。根据this page，我们使用“Kinetic.Util.extend”来执行此操作。
但是我一直在阅读official docs 并且似乎 Kinetic.Util.extend 没有记录！该页面也使用 Kinetic.Shape.call() 但我也找不到任何相关信息。
如果我们不应该使用这些方法，推荐的方法是什么？
如果它们仍然是推荐的方法，为什么没有记录它们？
我已经花了很长时间试图找到任何有用的信息，而且它开始降低我对 kineticjs 的信心。
【问题讨论】：
标签： kineticjs
您确实可以扩展 KineticJS 语言以包含您的自定义形状。
您可以使用 Kinetic.Util.extend 以及一些使用 .call 配置自定义形状的构造函数来连接 KineticJS。
但是……
您很少需要正式扩展语言本身来完成大多数任务。
您无需提供有关项目的详细信息，但您可以定义一个可调整的多边形并将鼠标事件连接到该多边形，如下所示：
var poly=new Kinetic.Polygon({
x:10,
y:10,
points:[180,150, 165,176, 135,176, 120,150, 135,124, 165,124],
stroke:"green"
});
poly.on("mouseup",function(){
console.log("You released the mouse in this polygon");
});
layer.add(poly);
layer.draw();
这是一个演示：
<!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.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
#toolbar{
width:350px;
height:35px;
border:solid 1px blue;
}
</style>
<script>
$(function(){
// get a reference to the house icon in the toolbar
// hide the icon until its image has loaded
var $house=$("#house");
$house.hide();
// get the offset position of the kinetic container
var $stageContainer=$("#container");
var stageOffset=$stageContainer.offset();
var offsetX=stageOffset.left;
var offsetY=stageOffset.top;
// create the Kinetic.Stage and layer
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
// start loading the image used in the draggable toolbar element
// this image will be used in a new Kinetic.Image
var image1=new Image();
image1.onload=function(){
$house.show();
}
image1.src="house32x32.png";
// make the toolbar image draggable
$house.draggable({
helper:'clone',
});
// set the data payload
$house.data("myName","The House"); // key-value pair
// make the Kinetic Container a dropzone
$stageContainer.droppable({
drop:dragDrop,
});
// handle a drop into the Kinetic container
function dragDrop(e,ui){
var element=ui.draggable;
var draggable=element.data("myName");
if(dropTarget){
alert(draggable+" was dropped on the "+dropTarget.dropMessage);
}else{
alert("You didn't hit a drop polygon.");
}
}
var dropTarget=null;
var pts;
pts=[180,150, 165,176, 135,176, 120,150, 135,124, 165,124];
var poly1=makeDropzone("green",pts,"green hexagon");
pts=[200,250, 240,200, 280,250];
var poly2=makeDropzone("red",pts,"red triangle");
function makeDropzone(color,points,dropMessage){
var poly=new Kinetic.Polygon({
points:points,
stroke:color
});
poly.dropMessage=dropMessage;
poly.on("mouseenter",function(){
dropTarget=this;;
});
poly.on("mouseleave",function(){
dropTarget=null;
});
layer.add(poly);
layer.draw();
return(poly);
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Drag from blue toolbar to polygon</h4>
<div id="toolbar">
<img id="house" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png"><br>
</div>
<div id="container"></div>
</body>
</html>
【讨论】：