Как вы представляете часть SVG в холсте?

Основная проблема:Как вы представляете часть SVG в холсте?

Цель состоит в том, чтобы сделать часть с SVG на Canvas элементе фиксированного размера на веб-странице.

Мой Попытанные Решение:

Видя, как CanVG кажется наиболее прямой способ для визуализации SVG изображения в Canvas я полагал, что я мог бы использовать атрибут viewBox обрезать изображение до рендеринга CanVG в. У меня были проблемы с этим.

Вопрос:

предоставил SVG изображение, как можно визуализировать часть этого изображения на холсте элемента?

источник

2012-04-04 akdom

Неприемлемо ли отображать весь SVG на один холст, а затем просто «drawImage» часть этого холста для другого? – Phrogz

Это неприемлемо в этом случае, но можно ли это сделать со скрытым изображением? Тогда это не имело бы никакого значения. – akdom

Использование 'viewBox' звучит как действительно хороший способ пойти, однако. Возможно, это не поддерживается CanVG, или, возможно, вы просто делаете что-то неправильно. У вас есть пример, показывающий, что вы пробовали с этим и как это не удалось? – Phrogz

В чем именно проблема? Функция context.drawImage имеет встроенную функцию кадрирования. Вместо стандартных 3 параметров (объект изображения, положение x, позиция y) вы просто передаете ему 9 параметров и обрезаете изображение. Эти параметры:

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 
)

Я понятия не имею, если это работает с CanVG, но, до тех пор, как вы можете передать объект изображения к функции DrawImage(), вы сможете обрезать его, как указано в код.

источник

2012-04-05 02:07:41 Saturnix

Создание закадрового холст и сделать к нему с помощью CanVG:

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

Скопируйте часть этого холста-как-изображения для региона на другом холсте с помощью drawImage (ссылка на описание параметров):
```
var ctx = myVisibleCanvas.getContext('2d'); 
ctx.drawImage(full,10,20,80,60,92,16,80,60); 
```

Редактировать: Однако вышеуказанное не требуется, если у вас есть доступ к источнику SVG (прямо в JS или через запрос XMLHTTP), и перед рендерингом можно изменить атрибут viewBox. См. this demo, где показан SVG-файл, отображаемый непосредственно на один холст, а затем изменяет атрибут viewBox и отображает обрезанную область на другой холст.

источник

2012-04-05 02:45:32 Phrogz

Как вы представляете часть SVG в холсте?

ответ

Смежные вопросы