Изменение размера шаблона в холсте Html5

Question

Моя проблема: У меня есть ImageObject, который используется для создания объекта PatternObject. Моя проблема заключается в том, что я изменил свойства изображения width и height перед созданием шаблона, но на самом деле это не переназначает изображение (и это тоже не проблема). Дело в том, что у меня теперь есть шаблон, который отличается размера (исходного размера изображения), чем самого изображения. Если я хочу нарисовать строку с fillStyle этого шаблона, она не подходит (потому что мне нужен шаблон нового размера).

Мой вопрос: Есть ли простой способ, чтобы можно было настроить ширину и высоту рисунка?

Мои пытается и почему я не люблю их:

1) Рендер исходное изображение на холст с новым размером и создать шаблон из этого. Не использовать это, потому что шаблон не может быть загружен непосредственно в результате создания и визуализации холста слишком медленно. Но я хочу, чтобы этот шаблон был напрямую

2) Рассчитайте разницу между новым размером изображения и оригиналом, измените ширину линии в контексте, чтобы высота шаблонов точно соответствовала и масштабировала линию вниз, поэтому она имеет хороший размер , Не использовал это, потому что я визуализую в реальном времени, и это слишком медленно, чтобы использовать его позже в webapps.

Спасибо! :)

Answer 1

Использование холста (ваш шаг 1) является наиболее гибким способом.

Это не медленнее, используя холст, чтобы рисовать на другом холсте, чем использовать изображение напрямую. Они используют одну и ту же базовую основу (вы смешаете растровое изображение так же, как и с изображением).

(Update:. Рисование с использованием шаблона в стиле этого пройти дополнительный шаг локальной матрицы преобразования для модели в более поздних браузерах)

Создать новый холст в размере рисунка и простой нарисовать изображение в нем:

patternCtx.drawImage(img, 0, 0, patternWidth, patternHeight); 

Затем используйте полотно patternCtx в качестве основы для шаблона (внутренне шаблон кэширует это изображение в первый раз он обращается, оттуда, если это возможно, только в два раза, что он имеет пока не заполнится весь холст).

Другим вариантом является предварительное масштабирование изображений по всем необходимым для них размерам, загрузка их всех, а затем выбор изображения, размер которого тот, который вам нужен.

Третий способ - нарисовать изображение как образец. Однако это не так эффективно по сравнению со встроенным методом, хотя, используя вышеупомянутый метод (внутренний), вы можете получить полезный результат.

Пример ручного формирования рисунка:

var ctx = canvas.getContext('2d'); 
 
var img = new Image(); 
 
img.onload = function() { 
 
    fillPattern(this, 64, 64); 
 
    change.onchange = change.oninput = function() { 
 
    fillPattern(img, this.value, this.value); 
 
    } 
 
}; 
 
img.src = "//i.stack.imgur.com/tkBVh.png"; 
 

 
// Fills canvas with image as pattern at size w,h 
 
function fillPattern(img, w, h) { 
 

 
    //draw once 
 
    ctx.drawImage(img, 0, 0, w, h); 
 

 
    while (w < canvas.width) { 
 
     ctx.drawImage(canvas, w, 0); 
 
     w <<= 1; // shift left 1 = *2 but slightly faster 
 
    } 
 
    while (h < canvas.height) { 
 
     ctx.drawImage(canvas, 0, h); 
 
     h <<= 1; 
 
    } 
 
}

<input id=change type=range min=8 max=120 value=64><br> 
 
<canvas id=canvas width=500 height=400></canvas>

(или с video as pattern).