Saya tidak berpikir ini karena SVG, itu hanya karena Anda menskalakannya. Penskalaan di WebGL bicubic secara default dan linier di kanvas. Yang artinya akan kabur. Anda harus mengukur gambar dengan tepat lalu merendernya.

Pixi.js adalah perender bitmap, bukan perender vektor, artinya rendering SVG tidak benar-benar memberi Anda manfaat apa pun dibandingkan dengan png/jpg.

Hai teman-teman,

@englercj benar. Pixi meraster SVG saat Anda memuatnya. Saat ini tidak ada dukungan nyata untuk svg. Ini adalah sesuatu yang kami rencanakan untuk dilihat lebih jauh jika ada permintaan yang cukup.

Terima kasih!

Membuka kembali ini karena orang-orang jelas menginginkannya, tetapi belum menjadikannya sebagai tonggak sejarah.

Jika ada yang ingin menulis plugin v3 untuk ini, saya akan dengan senang hati membantunya. Kami memiliki beberapa plugin luar biasa lainnya yang akan kami buat terlebih dahulu, jadi ini mungkin akan memakan waktu lama kecuali komunitas mengambilnya untuk melakukannya!

Ubah skala menjadi 1, seperti pada spriteSVG.scale.set(1);. Edit tag pertama di file SVG...gandakan ukuran viewport seperti berikut:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 200 200">

Mungkin seseorang dapat menulis rutinitas untuk melakukan ini dan kemudian membuat tekstur dari hasilnya.

Saya akan memposting jsfiddle yang dimodifikasi, tetapi saya tidak dapat melewati masalah Berbagi Sumber Daya Lintas Asal.

Saya telah mengerjakan konversi SVG ke PIXI.Graphics selama beberapa jam terakhir dan itu bekerja dengan cukup baik:

https://github.com/saschagehlich/pixi-svg-graphics

Anda dapat melihat demonya di sini:
http://filshmedia.net/lab/pixi-svg/
(PIXI.Container ditingkatkan hingga 10x (SVG asli seperti 80x80), dan masih renyah)

Ini belum sepenuhnya diimplementasikan, tetapi saya mencobanya dengan beberapa file SVG dan saya pikir ini adalah awal yang baik. Sayangnya geometri kompleks tidak berfungsi sekarang, tetapi saya akan memeriksanya dalam beberapa hari ke depan.

Jika ada yang ingin membantu - jangan ragu untuk berkontribusi. :)

+1

banyak aset dalam game tidak terlalu cocok maka gagasan tentang semuanya adalah raster

Proyek PIXI-SVG-Graphics saya sekarang mendukung jalur kompleks, sehingga dapat digunakan. Juga, saya menerbitkannya sebagai modul di npm: https://www.npmjs.com/package/pixi-svg-graphics

Saya lebih suka solusi yang memanfaatkan mesin render SVG browser daripada mengimplementasikan mesin render baru.

Ide saya adalah membuat subkelas Sprite (dan/atau BaseTexture) "SVGSprite". Jika perender webGL digunakan, svg harus dirender ke tekstur dalam ukuran yang ditampilkan agar tidak buram.

Ide:

• buat kanvas 2d dengan ukuran yang tepat yang diperlukan untuk perender webgl
• gunakan .drawImage(svg_file,0, 0); di kanvas 2d
• gunakan kanvas 2d sebagai tekstur untuk perender webGL

Ukuran harus ditentukan menggunakan matriks transformasi global sehingga skala dihitung dengan benar bahkan ketika SVGSprite dimasukkan ke dalam wadah berskala. SVGSprite harus memiliki fungsi pembaruan sehingga penghitungan dan kanvas sumber diulang.

Dengan cara ini semua fitur SVG yang didukung browser bekerja di pixi dan hasilnya tidak buram.

@FlorianLudwig jadi sesuatu seperti https://Gist.github.com/biovisualize/8187844 digunakan dengan PIXI.Texture.fromCanvas dengan beberapa cara memperbarui versi kanvas gambar jika atribut SVG berubah seperti mySVG.setAttribute("transform", "scale(50 50)"); ?

@saschagehlich

Proyek PIXI-SVG-Graphics saya sekarang mendukung jalur kompleks, sehingga dapat digunakan.

sepertinya hal-hal dasar masih kurang ?

Kode semacam ini

    var canvas = document.createElement ('canvas');
    canvas.width = ...; canvas.height = ...;
    canvas.getContext ('2d').drawImage (svgImage, 0, 0, canvas.width, canvas.height);

    var sprite = new PIXI.Sprite (new PIXI.Texture (new PIXI.BaseTexture (canvas)));

memungkinkan untuk membuat sprite dengan resolusi yang diperlukan tanpa mengubah svg (kecuali jika Anda ingin meregangkannya, maka Anda harus menambahkan preserveAspectRatio="none" ke tag svg).

Jika Anda ingin memberi "+1" pada masalah ini, gunakan Reaksi GitHub untuk memberi +1 pada kiriman asli. Saya akan menghapus pesan "+1" apa pun di utas ini karena hanya berisik dan tidak memungkinkan untuk membaca percakapan di sini.

Saya memodifikasi kode Tekstur untuk mendukung ini, parameter ke-4 mengambil skala untuk svg, seperti ini:

new PIXI.Texture.fromImage('bunny.svg', undefined, undefined, 2.0);

Saya memotong tanda kelinci dan Anda dapat bermain dengan skala dengan mengubah baris 66 dari JS di sini:
http://codepen.io/anon/pen/pyXMzR.

@englercj , saya dapat membuat PR jika ini terlihat ok: https://github.com/RanzQ/pixi.js/commit/07522e6dddcdb4741e196ad5f20bb8e534fbb59e

Dengan cara ini seseorang dapat menskalakan dan meraster ulang tekstur pada pengubahan ukuran jendela sehingga pemandangan akan responsif dan tetap memiliki kinerja tinggi yang disediakan pixi.

PR: https://github.com/pixijs/pixi.js/pull/2614

PR digabungkan, tutup ini!

Itu berfungsi dengan baik di Chrome dan FF, tetapi tidak berfungsi di IE11. Saya mendapatkan SecurityError dengan baris kode ini

let tiger = new Sprite(new PIXI.Texture.fromImage('images/tiger.svg', true, PIXI.SCALE_MODES.LINEAR, 8.0)); 

Bagaimana cara memperbaikinya?

Ah SecurityError yang bagus. Itu bug di IE11 yang telah diperbaiki di Edge, tetapi tidak di IE11:

https://github.com/pixijs/pixi.js/issues/2928

Tidak ada yang dapat Anda lakukan, kecuali mengonversi SVG Anda ke PNG

Senang mendengarnya. Terima kasih untuk petunjuk.

Am 14.12.2017 08:10 schrieb "Sascha Gehlich" [email protected] :

Ah SecurityError yang bagus. Itu bug di IE11 yang sudah diperbaiki
Tepi, tetapi tidak di IE11:

2928 https://github.com/pixijs/pixi.js/issues/2928

Tidak ada yang dapat Anda lakukan, kecuali mengonversi SVG Anda ke PNG

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/pixijs/pixi.js/issues/936#issuecomment-351627238 , atau bisukan
benang
https://github.com/notifications/unsubscribe-auth/AAu1ZuPEIl_MUskNn1grboYcBl6Vxdxlks5tAMnfgaJpZM4CaLFV
.

Saya mencoba menggunakan PIXI.Texture.fromImage untuk menampilkan gambar SVG seperti yang Anda jelaskan di atas, tetapi pada smartphone SVG tampak buram.

Berikut contoh kode https://codepen.io/anon/pen/QaxqvP
Di browser desktop sepertinya ok, tetapi ketika saya mencoba ini di ponsel cerdas atau emulator Android saya, SVG merender seperti ini:
https://imgur.com/VbXlypP (gambar di sebelah kiri adalah PIXI-SVG; kanan, adalah tag img html).

Mungkin itu adalah sesuatu dengan devicePixelRatio, tampaknya browser "Zooms-in" agar sesuai dengan layar - karena di desktop jika saya memperbesar saya dapat meniru perilaku yang sama.
Bagaimana cara yang benar untuk menampilkan/menskalakan SVG pada perangkat dengan rasio piksel lebih besar dari 1?

Tidak terlihat buram bagi saya. Tangkapan layar dari iPhone X.

Perbesar tangkapan layar Anda, Anda akan melihatnya. Anda kurang buram daripada milik saya tetapi buram.

Saya mencoba contoh di atas, tetapi untuk beberapa alasan,

let texture = new PIXI.Texture.fromImage('../assets/heart.svg', false, undefined, 2);

melempar

ERROR Error: The SVG image must have width and height defined (in pixels), canvas API needs them.

Jika saya memuat gambar terlebih dahulu dengan

PIXI.loader.add("../assets/heart.svg").load(...)

Kesalahan tidak terjadi, tetapi sprite yang dirender yang berisi tekstur dari new PIXI.Texture.fromImage semuanya berpiksel, yang membuat saya yakin bahwa SVG tidak dirender dengan benar. Selanjutnya, mengubah sourceScale tampaknya tidak berpengaruh.

EDIT 1

Jadi saya baru saja melihat bahwa sourceScale tidak berpengaruh ketika tekstur dimuat dengan loader (https://github.com/pixijs/pixi.js/issues/4543). Saya akan melanjutkan penelitian saya tentang mengapa kesalahan dilemparkan.

EDIT 2

Lebar dan tinggi svg saya didefinisikan sebagai berikut: <svg width="38.148697mm" height="32.77169mm" ...> . Ternyata PIXI melempar kesalahan ketika dimensi ditentukan dalam "mm". Menghapus "mm" dan semuanya berfungsi dengan baik.

@maximedupre karena keterbatasan browser, hanya nilai px yang berfungsi. Itu sebabnya kesalahan dilemparkan sehingga Anda tahu bahwa Anda perlu memodifikasi svgs Anda.

Utas ini telah dikunci secara otomatis karena tidak ada aktivitas terbaru setelah ditutup. Silakan buka edisi baru untuk bug terkait.