ラファエルのオブジェクトを相対的に配置する

私は最近Raphael.jsを使いこなしていました。ラファエルの各オブジェクトの位置に関する問題が発生しました。ラファエルのオブジェクトを相対的に配置する

「キャンバス」は任意に作成したいが、ページ上にすでに配置されているdiv内に配置したい。私はブロック要素のような振る舞いをする方法を見つけようとしていますが、答えは出ていません。それぞれの新しいraphaelオブジェクトはdivの外側に配置されます。ここ

は、HTMLです：

... 
#content{height:100%; width:980px; margin:0 auto;} 
</style> 
</head> 
<body> 
    <div id="content"></div> 
...

とJavaScript：私は考慮し

var previews = []; 
var prevSize = 25; 
var spacing = 10; 

//get container 
var container = document.getElementById('content'); 

//get container width 
var containerWidth = parseInt(getComputedStyle(container,"").getPropertyValue('width')); 

var prevsPerRow =containerWidth/(prevSize+spacing); 
var rowsPerPage = 20; 

for(var y=0; y<rowsPerPage-1; y++){ 
    for(var x=0; x<prevsPerRow; x++){ 
     var preview = Raphael((x*prevSize)+(x*spacing), (y*prevSize)+(y*spacing),prevSize, prevSize); 
     previews.push(preview); 
    } 
} 

for(var x=0; x<previews.length-1; x++){ 
    var temp = previews[x]; 
    var rectangle =temp.rect(0,0,prevSize,prevSize); 
    rectangle.attr('fill','black'); 
}

一つの解決策は、単に、オブジェクトのxおよびy COORDSに所望のDIVのオフセットを加算しましたしかし、これは最善の解決策のようには見えません。

ありがとうございました！

編集：ここに私が得ているものを正確に解明するのに役立つjsfiddleがあります。 http://jsfiddle.net/xpNBr/

出典

2011-08-14 danem

これは2年遅れですが、私はここで答えが見えません。後世と将来の希望者にとって：私はhereと記述されているように、raphaelによって提供されている要素または要素のIdファクトリメソッドを使用します。そのページから、

：

// Each of the following examples create a canvas 
// that is 320px wide by 200px high. 
// Canvas is created at the viewport’s 10,50 coordinate. 
var paper = Raphael(10, 50, 320, 200); 
// Canvas is created at the top left corner of the #notepad element 
// (or its top right corner in dir="rtl" elements) 
var paper = Raphael(document.getElementById("notepad"), 320, 200); 
// Same as above 
var paper = Raphael("notepad", 320, 200); 
// Image dump 
var set = Raphael(["notepad", 320, 200, { 
    type: "rect", 
    x: 10, 
    y: 10, 
    width: 25, 
    height: 25, 
    stroke: "#f00" 
}, { 
    type: "text", 
    x: 30, 
    y: 40, 
    text: "Dump" 
}]);

出典

2013-04-29 02:51:36 mglanzer

ないより遅れて！私はラファエルにこの質問をしてから触れていないが、誰かにとって助けになるだろうと確信している。ありがとう！ – danem

jsfiddleでそれを実行すると、テキストオブジェクトはその座標に関してrectオブジェクトに相対的ではないことが示されます。どちらもキャンバスに関連しています。どのように私は親矩形に相対的な座標で1つの矩形を描くことができます。どちらも同じキャンバスにありますか？ – remort

新しく作成されたキャンバスごとに異なるコンテナを使用できます。

http://jsfiddle.net/creaweb/KtNPS/5/

キャンバスブロック間の間隔は、CSSで定義されていることに注意してください、だけでなく、その大きさ：ここで
は、すべての新しい要素を作成するためにaddCanvas機能を使用して、実施例です。

出典

2011-08-16 11:57:16

ラファエルのオブジェクトを相対的に配置する

答えて

関連する問題