2021SC@SDUSC
Обзор
В последнем исследовании мы изучили некоторые методы в CanvasPainter.js, такие как метод delLayer, метод eachLayer, метод изменения размера, метод getRenderedCanvas и т. д. Эти методы в основном предназначены для повторного рендеринга размера и содержимого холста для достижения определенных целей. На этот раз мы продолжим изучать некоторые методы холста, которые также в основном сосредоточены в CanvasPainter.js.
метод pathToImage(path, dpr)
Этот метод принимает два параметра. Один путь, другой dpr (степень пикселя).В начале функции сначала получаем все свойства о холсте, такие как dpr, ctx (контекст рисования холста, это свойство инициализируется после вызова initContext() перед инициализацией null), rect (матрица границ), style (стиль), shadowBlurSize, shadowOffsetX (смещение изображения по оси X), shadowOffsetY (смещение изображения по оси Y), lineWidth, leftMargin (левый край), rightMargin (правый край ), topMargin (верхний край), bottomMargin (нижний край), ширина, высота и т. д. И используйте ширину и высоту и dpr, чтобы назначить ширину и высоту вновь созданного холста, и назначьте масштаб ctx, и назначьте граничную матрицу, в то же время установите ctx.dpr=dpr, а затем определите объект pathTransform , который содержит позицию (position), вращение (угол поворота) и масштаб (соотношение размеров).
Затем нужно присвоить значения входящему пути, а также присвоить значения его положению, вращению, масштабу и skew (углу наклона), а заодно вызвать метод composeParentTransform() на пути. нижняя часть в основном знакомит с методом composeParentTransform. Затем оцените путь, затем установите ctx пути и визуализируйте путь, затем создайте новое изображение, установите начальный стиль, изображение является холстом холста, а затем оцените, являются ли положение, поворот, масштаб и другие атрибуты pathTransform имеет значение null, если нет, используйте значения этих трех атрибутов, чтобы присвоить значения положению, повороту и масштабу img и пути соответственно, и, наконец, вернуть изображение img.
dpr = dpr || this.dpr;
let canvas = canvasUtil.createCanvas(); //创建隐藏的 canvas，在内存中。
let ctx = canvasUtil.getContext(canvas);
let rect = path.getBoundingRect();
let style = path.style;
let shadowBlurSize = style.shadowBlur * dpr;
let shadowOffsetX = style.shadowOffsetX * dpr;
let shadowOffsetY = style.shadowOffsetY * dpr;
let lineWidth = style.hasStroke() ? style.lineWidth : 0;
let leftMargin = mathMax(lineWidth / 2, -shadowOffsetX + shadowBlurSize);
let rightMargin = mathMax(lineWidth / 2, shadowOffsetX + shadowBlurSize);
let topMargin = mathMax(lineWidth / 2, -shadowOffsetY + shadowBlurSize);
let bottomMargin = mathMax(lineWidth / 2, shadowOffsetY + shadowBlurSize);
let width = rect.width + leftMargin + rightMargin;
let height = rect.height + topMargin + bottomMargin;
canvas.width = width * dpr;
canvas.height = height * dpr;
ctx.scale(dpr, dpr);
ctx.clearRect(0, 0, width, height);
ctx.dpr = dpr;
let pathTransform = {
position: path.position,
rotation: path.rotation,
scale: path.scale,
};
path.position = [leftMargin - rect.x1, topMargin - rect.y1];
path.rotation = 0;
path.scale = [1, 1];
path.skew = [0, 0];
path.composeParentTransform();
if (path) {
path.ctx = ctx;
path.render();
}
let img = new Image({
style: {
x: 0,
y: 0,
image: canvas,
},
});
if (pathTransform.position != null) {
img.position = path.position = pathTransform.position;
}
if (pathTransform.rotation != null) {
img.rotation = path.rotation = pathTransform.rotation;
}
if (pathTransform.scale != null) {
img.scale = path.scale = pathTransform.scale;
}
return img;
}
получитьBoundingRect()
Функция этой функции состоит в том, чтобы получить ограничивающий прямоугольник текущего элемента.Этот метод появляется в вышеупомянутом методе обработки.Для let rect = path.getBoundingRect();этого метода стиль должен быть установлен первым var style = this.style;, потому что он должен каждый раз оптимизироваться, чтобы избежать нормализации. Для метода getStroke(), вызываемого в этом методе, переданный атрибут style.textStoke предназначен для установки textStroke некоторого цвета в качестве значения по умолчанию в верхнем приложении, где значение ширины textStroke по умолчанию должно быть равно 0, чтобы гарантировать, что пользователь может отказаться от использования textStroke. Затем var rect = textUtil.getBoundingRect(style.text + '', style.font, style.textAlign, style.textVerticalAlign, style.textPadding, style.textLineHeight, style.rich)установите некоторые свойства прямоугольника.При создании прямоугольника необходимо инициализировать некоторые свойства стиля.Это все необходимые инициализации. Затем установите прямоугольник x1, y1, x2, y2, ширину и высоту и т. д. и, наконец, назначьте прямоугольник свойству this.__boundingRect и, наконец, верните свойство. Следует отметить, что этот метод возвращает ограничивающий прямоугольник, который не был обработан с помощью transform(translate/scale/rotate/skew), но прямая модификация свойства shape будет отражена в полученном ограничивающем прямоугольнике. Например, если вы напрямую присвоите значение this.shape.width с помощью кода, то новое свойство ширины будет использоваться для вычисления при вычислении ограничивающего прямоугольника. Это то, на что вам нужно обратить внимание, поэтому вам нужно выполнить некоторую обработку прямоугольника, чтобы работать.
сегмент кода ключа
rect.x2 = rect.x1 + rect.width;
rect.y2 = rect.y1 + rect.height;
rect.x1 = parseInt(rect.x1);
rect.y1 = parseInt(rect.y1);
rect.x2 = parseInt(rect.x2);
rect.y2 = parseInt(rect.y2);
rect.width = parseInt(rect.width);
rect.height = parseInt(rect.height);
this.__boundingRect = rect;
Этот раздел кода в основном создает и присваивает значения тексту и прямоугольнику в методе getBoundingRect, а также присваивает значения x1, y1, ширине и высоте прямоугольника.
var text = style.text;
text != null ? text += '' : text = '';
var rect = textUtil.getBoundingRect(style.text + '', style.font, style.textAlign, style.textVerticalAlign, style.textPadding, style.textLineHeight, style.rich);
rect.x1 += style.x || 0;
rect.y1 += style.y || 0;
if (textUtil.getStroke(style.textStroke, style.textStrokeWidth)) {
var w = style.textStrokeWidth;
rect.x1 -= w / 2;
rect.y1 -= w / 2;
rect.width += w;
rect.height += w;
Подведем итог
Благодаря этому исследованию мы в основном узнали о двух методах, а также о некоторых небольших методах подключения. Этими двумя методами являются создание граничной матрицы (getBoundingRect), генерация ключевого изображения (pathToImage) и другие методы. По другим причинам, оставшиеся Мы продолжим изучение следующего метода в следующий раз.