个人中心
gpt4 book ai didi

javascript - 使用 KineticJS 的图表创建器

转载 作者：太空宇宙 更新时间：2023-11-04 14:36:36 24 4
gpt4 key购买 nike

我正在使用 KineticJS 开发一个简单的图表编辑器。我想为调色板区域(包含许多代表我可能创建的网络的不同节点的 Kinetic.Groups)和图表区域使用两个单独的 Canvas ，我可以在其中通过拖放从调色板添加节​​点, 然后添加各个节点之间的连接作为特定的 anchor 。我无法弄清楚从(固定的)Kinetic.Groups 的调色板 Canvas 到包含图表区域的其他 Canvas 的拖放过程。我猜我需要触发调色板对象的 dragstart 事件(虽然我不希望它们本身是可拖动的)，然后做一些事情，比如创建一个可以拖动的调色板对象的不透明副本, 最后放入图表区域(完全不透明)。

能否将组拖出暂存 Canvas 边界？也许我需要在开始从调色板拖动时生成一个图像，将该图像拖过来，然后在放入图表区域时创建另一个组。

有没有人知道任何可能为我指明正确方向的示例，或者谁可以提供对所需过程的一些见解(甚至代码)。我搜索了 KineticJS 示例，但找不到足够的内容让我继续。

最佳答案

这是将节点从源调色板拖到目标组的一种方法:

fiddle :http://jsfiddle.net/m1erickson/xtVyL/

enter image description here

网络节点由小图标表示(它们是非常小的动态图像对象)。

用户可以将任何图标从源调色板拖动到任何目标组。

组只是 Canvas 上定义的区域，但可以是 Kinetc.Groups 以获得更大的灵 active 。

在 dragend 事件期间，将在目标组中创建被拖动图标的新副本。

dragend事件完成后，原来的调色板图标自动从可以将新创建​​的重复图标拖到目标组周围(但不能拖到该组之外)。

这是代码和 fiddle :http://jsfiddle.net/m1erickson/xtVyL/ 

<!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.5.5.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);


    // image loader

    var imageURLs=[];
    var imagesOK=0;
    var imgs=[];
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/tempPC.png");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/tempServer.png");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/tempRouter.png");
    loadAllImages();

    function loadAllImages(callback){
        for (var i = 0; i < imageURLs.length; i++) {
            var img = new Image();
            imgs.push(img);
            img.onload = function(){ 
                imagesOK++; 
                if (imagesOK==imageURLs.length ) {
                    start();
                }
            }; 
            img.src = imageURLs[i];
        }      
    }


    // top icon positions
    var nextIconX=20;
    var nextIconY=20;

    // define groups
    var groups=[];
    groups.push({x:0,y:100,w:175,h:250,fill:"skyblue"});
    groups.push({x:175,y:100,w:175,h:250,fill:"cornsilk"});
    // add boundary info to each group
    // draw colored rect to show group area
    for(var i=0;i<groups.length;i++){
        var g=groups[i];
        g.left=g.x;
        g.right=g.x+g.w;
        g.top=g.y;
        g.bottom=g.y+g.h;
        var rect=new Kinetic.Rect({
            x:g.x,
            y:g.y,
            width:g.w,
            height:g.h,
            fill:g.fill,
            stroke:"gray"
        });
        layer.add(rect);
    }
    // hittest for each group
    function groupHit(x,y){
        for(var i=0;i<groups.length;i++){
            var g=groups[i];
            if(x>g.left && x<g.right && y>g.top && y<g.bottom){return(i);}
        }
        return(-1);
    }


    function start(){
        makePaletteIcon(imgs[0]);
        makePaletteIcon(imgs[1]);
        makePaletteIcon(imgs[2]);
        layer.draw();
    }


    function makePaletteIcon(img){

        // make an icon that stays in the pallette tray
        var fixedIcon=newImage(nextIconX,nextIconY,img,false);
        layer.add(fixedIcon);


        // make an icon that is dragged from the tray to a group
        var dragIcon=makeDraggableIcon(nextIconX,nextIconY,img);
        layer.add(dragIcon);

        // calc the next icon position
        nextIconX+=(img.width+20);

    }


    function makeDraggableIcon(x,y,img){

        var i=newImage(x,y,img,true);
        // 
        i.trayX=x;
        i.trayY=y;
        //
        i.setOpacity(0.50);

        i.on("dragend",function(){

            var x=this.getX();
            var y=this.getY();

            // if this pallette icon was not dropped in a group
            // put the icon back in the tray and return
            var hit=groupHit(x,y);
            if(hit==-1){
                this.setPosition(this.trayX,this.trayY);
                return;
            }

            // add a copy of this icon to the drop group  
            var component=newImage(x,y,this.getImage(),true);

            // set drag limits
            var group=groups[hit];
            component.maxDragLeft=group.left;
            component.maxDragRight=group.right;
            component.maxDragTop=group.top;
            component.maxDragBottom=group.bottom;

            // limit component dragging to inside the assigned group
            component.setDragBoundFunc(function(pos) {
                var xx=pos.x;
                var yy=pos.y;
                var w=this.getWidth();
                var h=this.getHeight();
                if(pos.x<this.maxDragLeft){xx=this.maxDragLeft;}
                if(pos.x+w>this.maxDragRight){xx=this.maxDragRight-w;}
                if(pos.y<this.maxDragTop){yy=this.maxDragTop;}
                if(pos.y+h>this.maxDragBottom){yy=this.maxDragBottom-h;}
                return{ x:xx, y:yy };
            });

            layer.add(component);

            // move the dragIcon back into the pallette tray
            this.setPosition(this.trayX,this.trayY);

            layer.draw();

        });

        return(i);
    }

    // make a new Kinetic.Image
    function newImage(x,y,img,isDraggable){
        var i=new Kinetic.Image({
            image:img,
            x: x,
            y: y,
            width: img.width,
            height: img.height,
            draggable:isDraggable
        });
        return(i);
    }


}); // end $(function(){});

</script>       
</head>

<body>
    <p>Drag any icon from top into blue or yellow group</p>
    <div id="container"></div>
</body>
</html>

关于javascript - 使用 KineticJS 的图表创建器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18705587/

24 4 0
文章推荐： c++ - srand() 的问题，C++
文章推荐： java - @WebServlet 注释似乎会干扰 javadoc。有一个简单的解决方法吗？
文章推荐： php - 用两种不同的颜色设置 WordPress 页面的标题
文章推荐： c++ - 如何在不暴露类细节的情况下传递函数指针
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com