Question

我是kineticjs的新手。我正在寻找一个支持可调多边形线形的舞台，这个形状定义了有效的区域以便放入。

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

但是我一直在阅读this page，看起来Kinetic.Util.extend没有记录！该页面也使用了Kinetic.Shape.call（），但我也找不到任何相关内容。

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

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

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

Answer 1

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

通过使用Kinetic.Util.extend以及一些使用.call配置自定义形状的构造函数，您可以使用KineticJS。

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

扩展kineticjs形状

1 个答案: