扩展kineticjs形状

我是kineticjs的新手。我期待构建一个支持可调多边形线条形状的舞台，这些形状可定义用于放入东西的有效区域。扩展kineticjs形状

我被告知我需要扩展（继承）内置形状并添加我需要的功能。根据this page我们使用'Kinetic.Util.extend'来做到这一点。

但是我一直在阅读official docs，它似乎Kinetic.Util.extend没有文档！该页面也使用Kinetic.Shape.call（），但我无法找到任何关于这个。

如果我们不应该使用这些方法，那么推荐的方法是什么？

如果他们仍然是推荐的方法，为什么他们没有记录？

我已经花了太长时间试图找到任何有用的信息，并开始减少我对kineticjs的信心。

来源

2014-03-04 Ash

确实可以扩展KineticJS语言以包含自定义形状。

通过使用Kinetic.Util.extend加上一些使用.call配置自定义形状的构造函数，可以挂钩到KineticJS中。

Kinetic.Util.extend只是将“继承的”属性+方法从基类“类”复制到您的新对象。
通过发送包含对象所需属性（x，y坐标，宽度/高度等）的plain-old-javascript-object来配置动力学形状。
.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>

来源

2014-03-04 06:13:08 markE

感谢演示，我会玩一玩。延长线的主要原因是创建一个可编辑的多线，当鼠标在顶点上时显示“拖动点”（圆）。顺便说一句，为什么extend（）和call（）没有记录？这听起来像你说他们没有被弃用，并仍然有效。 – Ash

不客气。是的，扩展不被弃用，但它只用于改变KineticJS语言本身。即使如此，它更像是一个现有“类”的封装，而不是真正的继承（根本不像我的第一语言，C＃！）。在实践中，因为KineticJS是非常面向对象的，所以只需将属性和方法附加到现有对象上，而不是修改库。祝你的项目好运！ – markE

扩展kineticjs形状

回答

相关问题