easel.js matrix2d sample

Matrix2D() sample for easel js

by popopome

HTML

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<div id="a">
    <div id="aa" contenteditable="true">THANKS WO DEF
    </div>
</div>

<div><button id="-45deg">-45 deg</button>

</div>

CSS

#a {    
    background: deeppink;
    width: 120px;
    height: 20px;
    position: relative;
    left: 240px;
    top: 120px;

    display: -ms-flexbox;
    -ms-flex-flow: row;
    -ms-flex-align: center;
    -ms-flex-pack: center;


    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    overflow: hidden;
    
    transform-origin: 0 0; 
}

#aa {
    text-wrap: none;
    text-overflow: ellipsis;
    
}

JavaScript

var $a;
var deg = 35;

function deg2rad(v) {
   return v * Math.PI / 180;
}

function rotateLabel(deg) {
var m = new createjs.Matrix2D();
        m.rotate(deg2rad(deg));
        
        var mstr = [m.a,m.c,m.b,m.d,m.tx,m.ty].join(',')
        $a.css("transform", "matrix(" + mstr + ")");
    }

$(function() {
    $("#aa").html("LOADED");
    $a = $("#a");
    
    setTimeout(function() {
                deg = (deg + 10) % 360;
    }, 200)
        
        $('#-45deg').on("click", function() {});
});