Tuval Üzerindeki SVG'nin Bir Kısmı Nasıl Oluşturulur?

Question

Çekirdek Sorun:

amacı bir web sayfasında sabit bir boyut Tuval öğeye bir SVG bir kısmını kılmaktır.

My teşebbüs Çözüm

:

CanVG olarak gören ben CanVG en render önce kırpmak için viewBox niteliğini kaldıraç düşündüm Tuval bulunan SVG görüntüyü işlemek için en düz İleri yol olarak görünmektedir. Bu noktada sorun yaşıyorum.

Soru:

SVG resmini kaydıyla, nasıl biri Tuval elemana o görüntünün bir kısmını işleyebilen?

Answer 1

Tam olarak sorun nedir? context.drawImage işlevi içinde güzel bir kırpma özelliğine sahiptir. Standart 3 parametresi yerine (resim nesnesi, x konumu, y konumu) bunun yerine 9 parametresini geçirirsiniz ve görüntüyü kırpır. Bu parametreler şunlardır:

context.drawImage(
imageObject, 
original image x crop position, 
original image y crop position, 
original image crop width, 
original image crop height, 
canvas image x crop position, 
canvas image y crop position, 
canvas image crop width, 
canvas image crop height 
) 

bahsedildiği gibi Eğer fonksiyon drawImage(), bunu kırpmak mümkün olacak bir görüntü nesnesi geçebilir bu sürece, CanVG ile çalışır ancak eğer hiçbir fikrim yok kodu. o CanVG kullanmanın

Answer 2

1. ekran dışında bir tuval oluşturun ve oluştur:

   var full = document.createElement('canvas'); 
   full.width=800; full.height=600; 
   canvg(full, '<svg>…</svg>'); 
   

2. Kopyala drawImage kullanarak başka tuval üzerinde bir bölgeye bu kanvas-as-görüntünün bir kısmını (parametre detayları için bağlantıya bakın):

   var ctx = myVisibleCanvas.getContext('2d'); 
   ctx.drawImage(full,10,20,80,60,92,16,80,60); 
   

Edit: Ancak, SVG kaynağına (doğrudan JS'de veya bir XMLHTTP isteğiyle) erişiminiz varsa ve işleme başlamadan önce viewBox özniteliğini değiştirebilirseniz, yukarıdakiler gerekli değildir. Doğrudan bir tuvale yapılmış bir SVG dosyasını gösteren this demo belgesine bakın ve viewBox özniteliğini değiştirir ve kırpılan bölgeyi başka bir brandaya dönüştürür.