扩展kineticjs形状
扩展kineticjs形状
提问于 2014-03-04 13:01:15
我是第一次接触kineticjs。我正在寻找建立一个阶段，支持可调整的多边形线形状，定义了有效的区域投放的东西。
有人告诉我，我需要扩展(继承)内置的形状，并添加所需的功能。根据this page的说法，我们使用'Kinetic.Util.extend‘来做这件事。
然而，我一直在阅读official docs，似乎Kinetic.Util.extend是没有文档记录的！该页面还使用了Kinetic.Shape.call()，但我也找不到与此相关的任何内容。
如果我们不应该使用这些方法，推荐的方法是什么？
如果它们仍然是推荐的方法，为什么没有对它们进行记录？
我已经花了很长时间试图找到关于这方面的任何有用的信息，这开始降低我对kineticjs的信心。
回答 1
Stack Overflow用户
发布于 2014-03-04 14:13:08
您确实可以扩展KineticJS语言以包含自定义形状。
您可以通过使用Kinetic.Util.extend和一些使用.call来配置自定义形状的构造函数来挂钩到KineticJS。
- Kinetic.Util.extend只是将“继承”类从基类复制到您的新object.
- Kinetic形状，通过发送一个包含所需对象属性(x，y坐标，宽/高等)的普通properties+methods -properties+methods-javascript对象来配置。
- .call用于初始化您的自定义形状及其具有配置属性的“基类”。
但是..。
：你很少需要正式地扩展语言本身来完成大多数任务。
您没有提供有关项目的详细信息，但您可以定义一个可调整的多边形，并将鼠标事件连接到该多边形，如下所示：
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22163330
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号