İzometrik görünüm için SVG ögelerini çevirme

Standart 2D SVG/Canvas öğelerini (Raphael-JS ile çizilmiş) izometrik bir 3Dish görünümünde görüntülemek için bazı JavaScript kodları üzerinde çalışıyorum.İzometrik görünüm için SVG ögelerini çevirme

İki tane dikdörtgenin yan yana çizildiğini varsayalım. Sonra onları izometrik bir görünüm için doğru açılarda (temelde 30 derecelik bir bükülme) yeniden çiziyorum. (İki mukabil elemanlar için orijinini gösterdik Yukarıdaki resimde .)

alt text

Sorunum düzgün tüm bireysel unsurları bu kadar çevirmek için nasıl bilmiyorum sadece örtüşen yerine "kiremit" doğru.

Fayansları kullanmak, herhangi bir döşemenin yerleşimini bir öncekine dayanabildiğim için işleri daha kolay hale getirirken, bu durumda fayans çalışmayacak. Her şey dinamik ve basit x/y uçaklarından daha karmaşık olacak. Bu nesnelerin nasıl yerleştirileceğine dair herhangi bir karışıklık varsa

Here is an image of some isometric tiles.

kaynak

2011-01-23 Chris Cummings

Unvanınız HTML tuval öğesi kullandığınızı gösterir görünüyor. Raphael SVG'yi kullandığı için (orada da tuvalden bahsediyor olsalar bile) bazı cevaplar almak için bunu temizlemek isteyebilirsiniz. İlginç bir soru olsa da! – polarblau

İpucu için teşekkürler, polarblau. Sorumu açıklığa kavuşturmaya çalışacağım. –

Sorunuzda sağladığınız grafik, iki karenin aynı yükseklikten zeminde olduğunu varsayarak, doğru bir izometrik projeksiyon olmadığını unutmayın. Sağladığınız URL'de gösterildiği gibi, bitişik karoların kenarları projeksiyondan sonra hizalanmalıdır. Eğer probleminizi göstermeye çalışıyorsanız, belki de bunun sizin gösterdiğiniz güncel/yanlış sonuç olduğunu daha net bir şekilde belirtmelisiniz. – Phrogz

Dönüşümü tek tek elemanlara değil, kaynak öğelerini koleksiyon olarak kullanmamalısınız. Raphael, sen

var s = paper.set(); 
s.push(square1, square2);

gibi bir şey kullanabilir ve şimdi bu gibi çalışması gerekiyordu çok fazla matematik, olmadan dönüşümler yapın:

// s.clone(); // if you want to keep originals 
s.rotate(45, 0, 0).scale(1, .7).translate(100, 0);

(Ancak, döndürülmüş öğelerden ölçeklendirme gibi görünüyor RaphaelJS kırık)

Düz SVG örnek:.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="-200,-500 1000,1000"> 
    <title>Isometric</title> 
     <g id="source"> <!-- group --> 
      <circle cx="-50" cy="-50" r="50"/> 
      <rect width="100" height="100"/> 
      <rect width="100" height="100" x="101"/> 
      <rect width="100" height="100" x="50" y="-200"/> 
     </g> 
     <!-- make copy of group and apply transformations --> 
     <use xlink:href="#source" transform="translate(500) scale(1, .7) rotate(-45)"/> 
</svg>

kaynak

2011-01-23 20:06:53 user123444555621

Yanıt için teşekkürler, Pumbaa80.Ne yazık ki bu çözüm benim için doğru değil. İstediğim şey, nihayetinde, temel bir kat planının bazı koordinatlarını girebilmektir. Ardından bu koordinatları bir izometrik projeksiyonda oluşturun ve z ekseni (yükseklik) elemanın "tabanından" uzağa doğru uzatın. Daha sonra, JavaScript aracılığıyla, bireysel öğeleri manipüle etmek istiyorum: onları taşıma, silme, ekleme ve değiştirme. Gerçekten, z-eksenleri çizemiyorum (ayak izlerinden küpler yap) ve seti döndürün. Her bir öğenin koordinatlarını yeniden ölçerek * her şeyin döndürülmesini * ve sonra da ekstrüdüm-> –

<-değiştirme - yükseklikleri yapılabileceğini varsayalım. Bunu yapmak işe yarayabilir ama oldukça çirkin görünüyor. Sonra tekrar, belki bu şekilde daha basit. Ben bunu deneyeceğim. –

Başka birinin yararı için, burada benim raporumuz öğeleri sayısının ölçeklendirilmesiyle ilgili raporumuz var: http://groups.google.com/group/raphaeljs/browse_thread/thread/217a5edb9db22419 –

kullanma, bunu .transform() yöntemini kullanarak ve 45 derece döndüren ve dikey olarak% 70 (ya da istediğiniz perde) ölçeklendiren bir dönüştürme dizesi kullanarak bunu yapabilirsiniz. Dönmekte olduğunuz pozisyona dikkat etmeniz ve aynı zamanda ölçeklemeniz önemlidir - bu durumda 0,0 kullanıyorum. Ayrıca rotasyonu telafi etmek için 100'ün üzerinde çevirdiğimi de göreceksiniz.

Dizeleri, bu kullanım durumu için de harikadır çünkü projeksiyon dönüşümünü sahnedeki diğer nesnelerin dönüştürülmesine basitçe hazırlayabilirsiniz ve hepsi de doğru yere gider. Örneğin

(http://jsfiddle.net/k22yG/ bakınız):

var paper = Raphael(10, 10, 320, 240), 
    set = paper.set(); 

// Build a set to make it easier to transform them all at once 
set.push(
    // Grid of rectangles 
    paper.rect(0, 0, 50, 50), 
    paper.rect(60, 0, 50, 50), 
    paper.rect(0, 60, 50, 50), 
    paper.rect(60, 60, 50, 50) 
); 

// Rotate, then scale, then move (describe in "reverse" order) 
set.transform('t100,0s1,0.7,0,0r45,0,0');

kaynak

2012-07-24 21:50:20

İzometrik görünüm için SVG ögelerini çevirme

cevap

İlgili konular