1.0.11 • Published 9 years ago

rectpack v1.0.11

Weekly downloads
13
License
ISC
Repository
-
Last release
9 years ago

Rectpack

a very fast implementation of a bin-packing algorithm. Good for spritesheets or atlastextures. Its data-based not DOM-based, so you can use it for DOM-objects as well as for canvas ...

##Demo

DEMO on Website

##Usage

Download the minified library and include it in your html.

<script src="js/two.min.js"></script>

It can als be installed via npm

npm install --save recter.js

Create a your, by calling the global Function RP :

var rectdata = RP(objectsData,options);

where objectsDatas is basicaly an array of objects which have tow fields mandatory:

singleObject = {
    width:  number
    height: number
    ownDataOrObjects: any 
}

you will get back the generated bin-packed-data, where elements are basically your inputElemnts with attached x (left) and y (top) values :

{
    atlasSize:{
        height:number,
        width:number
    },
    elements:[
        {
            width:  number
            height: number
            ownDataOrObjects: any,
            x: number,
            y: number
        },
        {
            width:  number
            height: number
            ownDataOrObjects: any,
            x: number,
            y: number
        }
        ...
    ]
}

##example

    var elements = [];
    for(var i = 0; i < 600; i++){
       var el =  document.createElement("div");
            el.style.width = (3 +Math.random()*30)+"px";
            el.style.height = (3 +Math.random()*30)+"px";
            el.style.backgroundColor = "rgba("+makeRandom255()+")";
            el.style.position = "absolute";
        someHTMLElement.appendChild(el);
            elements.push({
                "el":el,
                "id":i,
                "width":el.style.width,
                "height":el.style.height
            });
        }
    var els = RP(elements,{
        padding:2
    });
    console.log(els);
    els.elements.forEach(function(obj){ 
        obj.el.style.top = obj.y + "px";
        obj.el.style.left = obj.x + "px";
    });

for a small Demo have a look here: DEMO

1.0.11

9 years ago

1.0.10

9 years ago

1.0.9

10 years ago

1.0.8

10 years ago

1.0.7

10 years ago

1.0.6

10 years ago

1.0.5

10 years ago

1.0.4

10 years ago

1.0.2

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago