Raphaelテキストラベル付きでドラッグできるグラフィックス実現コード
1676 ワード
最近はJavascriptとRaphaëlを勉強して、ドラッグできる長方形を実現します.また長方形にラベルも表示されます.ネットで調べてみましたが、これはまだ比較的に寒いです.Javascriptはまだ何日も勉強していません.コードの見積もりは非常に悪いです.
Raphaël - Connectivities
<br>function Entity(r, l, t, w, h){
<br>this.Label = r.text(l + w/2, t + h/2, "Hello World!");
<br>this.Rectangle = r.rect(l, t, w, h, 10).attr({fill:"brown", stroke:"#666", title:"A Rectangle"}).drag(move, Dragger, up).data("cooperative", this.Label).toBack();
<br>function Dragger(){
<br>this.xx = this.attr("x");
<br>this.yy = this.attr("y");
<br>this.animate({"fill-opacity": .2}, 500);
<br>}
<br>function move(dx, dy){
<br>var attr = {x: this.xx + dx, y: this.yy + dy};
<br>this.attr(attr);
<br>var lb = this.data("cooperative");
<br>var attr1 = {x: this.xx + dx + this.attr("width") / 2, y: this.yy + dy + this.attr("height") / 2};
<br>lb.attr(attr1);
<br>}
<br>function up(){
<br>this.animate({"fill-opacity": 1}, 300);
<br>}
<br>}
<br>window.onload = function(){
<br>var r = Raphael("holder", 620, 420),discattr={fill:"red", stroke:"none"};
<br>var entity1 = new Entity(r, 0, 0, 60, 40);
<br>};
<br>