擴展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形狀

回答

相關問題