How to use TextState method in wpt

Best JavaScript code snippet using wpt

textreplay.js

Source:textreplay.js Github

copy

Full Screen

1goog.provide('ol.render.canvas.TextReplay');2goog.require('ol');3goog.require('ol.colorlike');4goog.require('ol.dom');5goog.require('ol.extent');6goog.require('ol.geom.flat.straightchunk');7goog.require('ol.geom.GeometryType');8goog.require('ol.has');9goog.require('ol.render.canvas');10goog.require('ol.render.canvas.Instruction');11goog.require('ol.render.canvas.Replay');12goog.require('ol.render.replay');13goog.require('ol.style.TextPlacement');14/**15 * @constructor16 * @extends {ol.render.canvas.Replay}17 * @param {number} tolerance Tolerance.18 * @param {ol.Extent} maxExtent Maximum extent.19 * @param {number} resolution Resolution.20 * @param {number} pixelRatio Pixel ratio.21 * @param {boolean} overlaps The replay can have overlapping geometries.22 * @param {?} declutterTree Declutter tree.23 * @struct24 */25ol.render.canvas.TextReplay = function(26 tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree) {27 ol.render.canvas.Replay.call(this,28 tolerance, maxExtent, resolution, pixelRatio, overlaps, declutterTree);29 /**30 * @private31 * @type {ol.DeclutterGroup}32 */33 this.declutterGroup_;34 /**35 * @private36 * @type {Array.<HTMLCanvasElement>}37 */38 this.labels_ = null;39 /**40 * @private41 * @type {string}42 */43 this.text_ = '';44 /**45 * @private46 * @type {number}47 */48 this.textOffsetX_ = 0;49 /**50 * @private51 * @type {number}52 */53 this.textOffsetY_ = 0;54 /**55 * @private56 * @type {boolean|undefined}57 */58 this.textRotateWithView_ = undefined;59 /**60 * @private61 * @type {number}62 */63 this.textRotation_ = 0;64 /**65 * @private66 * @type {?ol.CanvasFillState}67 */68 this.textFillState_ = null;69 /**70 * @type {Object.<string, ol.CanvasFillState>}71 */72 this.fillStates = {};73 /**74 * @private75 * @type {?ol.CanvasStrokeState}76 */77 this.textStrokeState_ = null;78 /**79 * @type {Object.<string, ol.CanvasStrokeState>}80 */81 this.strokeStates = {};82 /**83 * @private84 * @type {ol.CanvasTextState}85 */86 this.textState_ = /** @type {ol.CanvasTextState} */ ({});87 /**88 * @type {Object.<string, ol.CanvasTextState>}89 */90 this.textStates = {};91 /**92 * @private93 * @type {string}94 */95 this.textKey_ = '';96 /**97 * @private98 * @type {string}99 */100 this.fillKey_ = '';101 /**102 * @private103 * @type {string}104 */105 this.strokeKey_ = '';106 /**107 * @private108 * @type {Object.<string, Object.<string, number>>}109 */110 this.widths_ = {};111 var labelCache = ol.render.canvas.labelCache;112 labelCache.prune();113};114ol.inherits(ol.render.canvas.TextReplay, ol.render.canvas.Replay);115/**116 * @param {string} font Font to use for measuring.117 * @param {Array.<string>} lines Lines to measure.118 * @param {Array.<number>} widths Array will be populated with the widths of119 * each line.120 * @return {number} Width of the whole text.121 */122ol.render.canvas.TextReplay.measureTextWidths = function(font, lines, widths) {123 var numLines = lines.length;124 var width = 0;125 var currentWidth, i;126 for (i = 0; i < numLines; ++i) {127 currentWidth = ol.render.canvas.measureTextWidth(font, lines[i]);128 width = Math.max(width, currentWidth);129 widths.push(currentWidth);130 }131 return width;132};133/**134 * @inheritDoc135 */136ol.render.canvas.TextReplay.prototype.drawText = function(geometry, feature) {137 var fillState = this.textFillState_;138 var strokeState = this.textStrokeState_;139 var textState = this.textState_;140 if (this.text_ === '' || !textState || (!fillState && !strokeState)) {141 return;142 }143 var begin = this.coordinates.length;144 var geometryType = geometry.getType();145 var flatCoordinates = null;146 var end = 2;147 var stride = 2;148 var i, ii;149 if (textState.placement === ol.style.TextPlacement.LINE) {150 if (!ol.extent.intersects(this.getBufferedMaxExtent(), geometry.getExtent())) {151 return;152 }153 var ends;154 flatCoordinates = geometry.getFlatCoordinates();155 stride = geometry.getStride();156 if (geometryType == ol.geom.GeometryType.LINE_STRING) {157 ends = [flatCoordinates.length];158 } else if (geometryType == ol.geom.GeometryType.MULTI_LINE_STRING) {159 ends = geometry.getEnds();160 } else if (geometryType == ol.geom.GeometryType.POLYGON) {161 ends = geometry.getEnds().slice(0, 1);162 } else if (geometryType == ol.geom.GeometryType.MULTI_POLYGON) {163 var endss = geometry.getEndss();164 ends = [];165 for (i = 0, ii = endss.length; i < ii; ++i) {166 ends.push(endss[i][0]);167 }168 }169 this.beginGeometry(geometry, feature);170 var textAlign = textState.textAlign;171 var flatOffset = 0;172 var flatEnd;173 for (var o = 0, oo = ends.length; o < oo; ++o) {174 if (textAlign == undefined) {175 var range = ol.geom.flat.straightchunk.lineString(176 textState.maxAngle, flatCoordinates, flatOffset, ends[o], stride);177 flatOffset = range[0];178 flatEnd = range[1];179 } else {180 flatEnd = ends[o];181 }182 for (i = flatOffset; i < flatEnd; i += stride) {183 this.coordinates.push(flatCoordinates[i], flatCoordinates[i + 1]);184 }185 end = this.coordinates.length;186 flatOffset = ends[o];187 this.drawChars_(begin, end, this.declutterGroup_);188 begin = end;189 }190 this.endGeometry(geometry, feature);191 } else {192 var label = this.getImage(this.text_, this.textKey_, this.fillKey_, this.strokeKey_);193 var width = label.width / this.pixelRatio;194 switch (geometryType) {195 case ol.geom.GeometryType.POINT:196 case ol.geom.GeometryType.MULTI_POINT:197 flatCoordinates = geometry.getFlatCoordinates();198 end = flatCoordinates.length;199 break;200 case ol.geom.GeometryType.LINE_STRING:201 flatCoordinates = /** @type {ol.geom.LineString} */ (geometry).getFlatMidpoint();202 break;203 case ol.geom.GeometryType.CIRCLE:204 flatCoordinates = /** @type {ol.geom.Circle} */ (geometry).getCenter();205 break;206 case ol.geom.GeometryType.MULTI_LINE_STRING:207 flatCoordinates = /** @type {ol.geom.MultiLineString} */ (geometry).getFlatMidpoints();208 end = flatCoordinates.length;209 break;210 case ol.geom.GeometryType.POLYGON:211 flatCoordinates = /** @type {ol.geom.Polygon} */ (geometry).getFlatInteriorPoint();212 if (!textState.overflow && flatCoordinates[2] / this.resolution < width) {213 return;214 }215 stride = 3;216 break;217 case ol.geom.GeometryType.MULTI_POLYGON:218 var interiorPoints = /** @type {ol.geom.MultiPolygon} */ (geometry).getFlatInteriorPoints();219 flatCoordinates = [];220 for (i = 0, ii = interiorPoints.length; i < ii; i += 3) {221 if (textState.overflow || interiorPoints[i + 2] / this.resolution >= width) {222 flatCoordinates.push(interiorPoints[i], interiorPoints[i + 1]);223 }224 }225 end = flatCoordinates.length;226 if (end == 0) {227 return;228 }229 break;230 default:231 }232 end = this.appendFlatCoordinates(flatCoordinates, 0, end, stride, false, false);233 this.beginGeometry(geometry, feature);234 if (textState.backgroundFill || textState.backgroundStroke) {235 this.setFillStrokeStyle(textState.backgroundFill, textState.backgroundStroke);236 this.updateFillStyle(this.state, this.applyFill, geometry);237 this.updateStrokeStyle(this.state, this.applyStroke);238 }239 this.drawTextImage_(label, begin, end);240 this.endGeometry(geometry, feature);241 }242};243/**244 * @param {string} text Text.245 * @param {string} textKey Text style key.246 * @param {string} fillKey Fill style key.247 * @param {string} strokeKey Stroke style key.248 * @return {HTMLCanvasElement} Image.249 */250ol.render.canvas.TextReplay.prototype.getImage = function(text, textKey, fillKey, strokeKey) {251 var label;252 var key = strokeKey + textKey + text + fillKey + this.pixelRatio;253 var labelCache = ol.render.canvas.labelCache;254 if (!labelCache.containsKey(key)) {255 var strokeState = strokeKey ? this.strokeStates[strokeKey] || this.textStrokeState_ : null;256 var fillState = fillKey ? this.fillStates[fillKey] || this.textFillState_ : null;257 var textState = this.textStates[textKey] || this.textState_;258 var pixelRatio = this.pixelRatio;259 var scale = textState.scale * pixelRatio;260 var align = ol.render.replay.TEXT_ALIGN[textState.textAlign || ol.render.canvas.defaultTextAlign];261 var strokeWidth = strokeKey && strokeState.lineWidth ? strokeState.lineWidth : 0;262 var lines = text.split('\n');263 var numLines = lines.length;264 var widths = [];265 var width = ol.render.canvas.TextReplay.measureTextWidths(textState.font, lines, widths);266 var lineHeight = ol.render.canvas.measureTextHeight(textState.font);267 var height = lineHeight * numLines;268 var renderWidth = (width + strokeWidth);269 var context = ol.dom.createCanvasContext2D(270 Math.ceil(renderWidth * scale),271 Math.ceil((height + strokeWidth) * scale));272 label = context.canvas;273 labelCache.set(key, label);274 if (scale != 1) {275 context.scale(scale, scale);276 }277 context.font = textState.font;278 if (strokeKey) {279 context.strokeStyle = strokeState.strokeStyle;280 context.lineWidth = strokeWidth * (ol.has.SAFARI ? scale : 1);281 context.lineCap = strokeState.lineCap;282 context.lineJoin = strokeState.lineJoin;283 context.miterLimit = strokeState.miterLimit;284 if (ol.has.CANVAS_LINE_DASH && strokeState.lineDash.length) {285 context.setLineDash(strokeState.lineDash);286 context.lineDashOffset = strokeState.lineDashOffset;287 }288 }289 if (fillKey) {290 context.fillStyle = fillState.fillStyle;291 }292 context.textBaseline = 'middle';293 context.textAlign = 'center';294 var leftRight = (0.5 - align);295 var x = align * label.width / scale + leftRight * strokeWidth;296 var i;297 if (strokeKey) {298 for (i = 0; i < numLines; ++i) {299 context.strokeText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);300 }301 }302 if (fillKey) {303 for (i = 0; i < numLines; ++i) {304 context.fillText(lines[i], x + leftRight * widths[i], 0.5 * (strokeWidth + lineHeight) + i * lineHeight);305 }306 }307 }308 return labelCache.get(key);309};310/**311 * @private312 * @param {HTMLCanvasElement} label Label.313 * @param {number} begin Begin.314 * @param {number} end End.315 */316ol.render.canvas.TextReplay.prototype.drawTextImage_ = function(label, begin, end) {317 var textState = this.textState_;318 var strokeState = this.textStrokeState_;319 var pixelRatio = this.pixelRatio;320 var align = ol.render.replay.TEXT_ALIGN[textState.textAlign || ol.render.canvas.defaultTextAlign];321 var baseline = ol.render.replay.TEXT_ALIGN[textState.textBaseline];322 var strokeWidth = strokeState && strokeState.lineWidth ? strokeState.lineWidth : 0;323 var anchorX = align * label.width / pixelRatio + 2 * (0.5 - align) * strokeWidth;324 var anchorY = baseline * label.height / pixelRatio + 2 * (0.5 - baseline) * strokeWidth;325 this.instructions.push([ol.render.canvas.Instruction.DRAW_IMAGE, begin, end,326 label, (anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,327 this.declutterGroup_, label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,328 1, true, label.width,329 textState.padding == ol.render.canvas.defaultPadding ?330 ol.render.canvas.defaultPadding : textState.padding.map(function(p) {331 return p * pixelRatio;332 }),333 !!textState.backgroundFill, !!textState.backgroundStroke334 ]);335 this.hitDetectionInstructions.push([ol.render.canvas.Instruction.DRAW_IMAGE, begin, end,336 label, (anchorX - this.textOffsetX_) * pixelRatio, (anchorY - this.textOffsetY_) * pixelRatio,337 this.declutterGroup_, label.height, 1, 0, 0, this.textRotateWithView_, this.textRotation_,338 1 / pixelRatio, true, label.width, textState.padding,339 !!textState.backgroundFill, !!textState.backgroundStroke340 ]);341};342/**343 * @private344 * @param {number} begin Begin.345 * @param {number} end End.346 * @param {ol.DeclutterGroup} declutterGroup Declutter group.347 */348ol.render.canvas.TextReplay.prototype.drawChars_ = function(begin, end, declutterGroup) {349 var strokeState = this.textStrokeState_;350 var textState = this.textState_;351 var fillState = this.textFillState_;352 var strokeKey = this.strokeKey_;353 if (strokeState) {354 if (!(strokeKey in this.strokeStates)) {355 this.strokeStates[strokeKey] = /** @type {ol.CanvasStrokeState} */ ({356 strokeStyle: strokeState.strokeStyle,357 lineCap: strokeState.lineCap,358 lineDashOffset: strokeState.lineDashOffset,359 lineWidth: strokeState.lineWidth,360 lineJoin: strokeState.lineJoin,361 miterLimit: strokeState.miterLimit,362 lineDash: strokeState.lineDash363 });364 }365 }366 var textKey = this.textKey_;367 if (!(this.textKey_ in this.textStates)) {368 this.textStates[this.textKey_] = /** @type {ol.CanvasTextState} */ ({369 font: textState.font,370 textAlign: textState.textAlign || ol.render.canvas.defaultTextAlign,371 scale: textState.scale372 });373 }374 var fillKey = this.fillKey_;375 if (fillState) {376 if (!(fillKey in this.fillStates)) {377 this.fillStates[fillKey] = /** @type {ol.CanvasFillState} */ ({378 fillStyle: fillState.fillStyle379 });380 }381 }382 var pixelRatio = this.pixelRatio;383 var baseline = ol.render.replay.TEXT_ALIGN[textState.textBaseline];384 var offsetY = this.textOffsetY_ * pixelRatio;385 var text = this.text_;386 var font = textState.font;387 var textScale = textState.scale;388 var strokeWidth = strokeState ? strokeState.lineWidth * textScale / 2 : 0;389 var widths = this.widths_[font];390 if (!widths) {391 this.widths_[font] = widths = {};392 }393 this.instructions.push([ol.render.canvas.Instruction.DRAW_CHARS,394 begin, end, baseline, declutterGroup,395 textState.overflow, fillKey, textState.maxAngle,396 function(text) {397 var width = widths[text];398 if (!width) {399 width = widths[text] = ol.render.canvas.measureTextWidth(font, text);400 }401 return width * textScale * pixelRatio;402 },403 offsetY, strokeKey, strokeWidth * pixelRatio, text, textKey, 1404 ]);405 this.hitDetectionInstructions.push([ol.render.canvas.Instruction.DRAW_CHARS,406 begin, end, baseline, declutterGroup,407 textState.overflow, fillKey, textState.maxAngle,408 function(text) {409 var width = widths[text];410 if (!width) {411 width = widths[text] = ol.render.canvas.measureTextWidth(font, text);412 }413 return width * textScale;414 },415 offsetY, strokeKey, strokeWidth, text, textKey, 1 / pixelRatio416 ]);417};418/**419 * @inheritDoc420 */421ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle, declutterGroup) {422 var textState, fillState, strokeState;423 if (!textStyle) {424 this.text_ = '';425 } else {426 this.declutterGroup_ = /** @type {ol.DeclutterGroup} */ (declutterGroup);427 var textFillStyle = textStyle.getFill();428 if (!textFillStyle) {429 fillState = this.textFillState_ = null;430 } else {431 fillState = this.textFillState_;432 if (!fillState) {433 fillState = this.textFillState_ = /** @type {ol.CanvasFillState} */ ({});434 }435 fillState.fillStyle = ol.colorlike.asColorLike(436 textFillStyle.getColor() || ol.render.canvas.defaultFillStyle);437 }438 var textStrokeStyle = textStyle.getStroke();439 if (!textStrokeStyle) {440 strokeState = this.textStrokeState_ = null;441 } else {442 strokeState = this.textStrokeState_;443 if (!strokeState) {444 strokeState = this.textStrokeState_ = /** @type {ol.CanvasStrokeState} */ ({});445 }446 var lineDash = textStrokeStyle.getLineDash();447 var lineDashOffset = textStrokeStyle.getLineDashOffset();448 var lineWidth = textStrokeStyle.getWidth();449 var miterLimit = textStrokeStyle.getMiterLimit();450 strokeState.lineCap = textStrokeStyle.getLineCap() || ol.render.canvas.defaultLineCap;451 strokeState.lineDash = lineDash ? lineDash.slice() : ol.render.canvas.defaultLineDash;452 strokeState.lineDashOffset =453 lineDashOffset === undefined ? ol.render.canvas.defaultLineDashOffset : lineDashOffset;454 strokeState.lineJoin = textStrokeStyle.getLineJoin() || ol.render.canvas.defaultLineJoin;455 strokeState.lineWidth =456 lineWidth === undefined ? ol.render.canvas.defaultLineWidth : lineWidth;457 strokeState.miterLimit =458 miterLimit === undefined ? ol.render.canvas.defaultMiterLimit : miterLimit;459 strokeState.strokeStyle = ol.colorlike.asColorLike(460 textStrokeStyle.getColor() || ol.render.canvas.defaultStrokeStyle);461 }462 textState = this.textState_;463 var font = textStyle.getFont() || ol.render.canvas.defaultFont;464 ol.render.canvas.checkFont(font);465 var textScale = textStyle.getScale();466 textState.overflow = textStyle.getOverflow();467 textState.font = font;468 textState.maxAngle = textStyle.getMaxAngle();469 textState.placement = textStyle.getPlacement();470 textState.textAlign = textStyle.getTextAlign();471 textState.textBaseline = textStyle.getTextBaseline() || ol.render.canvas.defaultTextBaseline;472 textState.backgroundFill = textStyle.getBackgroundFill();473 textState.backgroundStroke = textStyle.getBackgroundStroke();474 textState.padding = textStyle.getPadding() || ol.render.canvas.defaultPadding;475 textState.scale = textScale === undefined ? 1 : textScale;476 var textOffsetX = textStyle.getOffsetX();477 var textOffsetY = textStyle.getOffsetY();478 var textRotateWithView = textStyle.getRotateWithView();479 var textRotation = textStyle.getRotation();480 this.text_ = textStyle.getText() || '';481 this.textOffsetX_ = textOffsetX === undefined ? 0 : textOffsetX;482 this.textOffsetY_ = textOffsetY === undefined ? 0 : textOffsetY;483 this.textRotateWithView_ = textRotateWithView === undefined ? false : textRotateWithView;484 this.textRotation_ = textRotation === undefined ? 0 : textRotation;485 this.strokeKey_ = strokeState ?486 (typeof strokeState.strokeStyle == 'string' ? strokeState.strokeStyle : ol.getUid(strokeState.strokeStyle)) +487 strokeState.lineCap + strokeState.lineDashOffset + '|' + strokeState.lineWidth +488 strokeState.lineJoin + strokeState.miterLimit + '[' + strokeState.lineDash.join() + ']' :489 '';490 this.textKey_ = textState.font + textState.scale + (textState.textAlign || '?');491 this.fillKey_ = fillState ?492 (typeof fillState.fillStyle == 'string' ? fillState.fillStyle : ('|' + ol.getUid(fillState.fillStyle))) :493 '';494 }...

Full Screen

Full Screen

TextBuilder.js

Source:TextBuilder.js Github

copy

Full Screen

1/**2 * @module ol/render/canvas/TextBuilder3 */4import CanvasBuilder from './Builder.js';5import CanvasInstruction from './Instruction.js';6import GeometryType from '../../geom/GeometryType.js';7import TextPlacement from '../../style/TextPlacement.js';8import {asColorLike} from '../../colorlike.js';9import {10 defaultFillStyle,11 defaultFont,12 defaultLineCap,13 defaultLineDash,14 defaultLineDashOffset,15 defaultLineJoin,16 defaultLineWidth,17 defaultMiterLimit,18 defaultPadding,19 defaultStrokeStyle,20 defaultTextAlign,21 defaultTextBaseline,22 registerFont,23} from '../canvas.js';24import {getUid} from '../../util.js';25import {intersects} from '../../extent.js';26import {matchingChunk} from '../../geom/flat/straightchunk.js';27/**28 * @const29 * @enum {number}30 */31export const TEXT_ALIGN = {32 'left': 0,33 'end': 0,34 'center': 0.5,35 'right': 1,36 'start': 1,37 'top': 0,38 'middle': 0.5,39 'hanging': 0.2,40 'alphabetic': 0.8,41 'ideographic': 0.8,42 'bottom': 1,43};44class CanvasTextBuilder extends CanvasBuilder {45 /**46 * @param {number} tolerance Tolerance.47 * @param {import("../../extent.js").Extent} maxExtent Maximum extent.48 * @param {number} resolution Resolution.49 * @param {number} pixelRatio Pixel ratio.50 */51 constructor(tolerance, maxExtent, resolution, pixelRatio) {52 super(tolerance, maxExtent, resolution, pixelRatio);53 /**54 * @private55 * @type {Array<HTMLCanvasElement>}56 */57 this.labels_ = null;58 /**59 * @private60 * @type {string|Array<string>}61 */62 this.text_ = '';63 /**64 * @private65 * @type {number}66 */67 this.textOffsetX_ = 0;68 /**69 * @private70 * @type {number}71 */72 this.textOffsetY_ = 0;73 /**74 * @private75 * @type {boolean|undefined}76 */77 this.textRotateWithView_ = undefined;78 /**79 * @private80 * @type {number}81 */82 this.textRotation_ = 0;83 /**84 * @private85 * @type {?import("../canvas.js").FillState}86 */87 this.textFillState_ = null;88 /**89 * @type {!Object<string, import("../canvas.js").FillState>}90 */91 this.fillStates = {};92 /**93 * @private94 * @type {?import("../canvas.js").StrokeState}95 */96 this.textStrokeState_ = null;97 /**98 * @type {!Object<string, import("../canvas.js").StrokeState>}99 */100 this.strokeStates = {};101 /**102 * @private103 * @type {import("../canvas.js").TextState}104 */105 this.textState_ = /** @type {import("../canvas.js").TextState} */ ({});106 /**107 * @type {!Object<string, import("../canvas.js").TextState>}108 */109 this.textStates = {};110 /**111 * @private112 * @type {string}113 */114 this.textKey_ = '';115 /**116 * @private117 * @type {string}118 */119 this.fillKey_ = '';120 /**121 * @private122 * @type {string}123 */124 this.strokeKey_ = '';125 /**126 * Data shared with an image builder for combined decluttering.127 * @private128 * @type {import("../canvas.js").DeclutterImageWithText}129 */130 this.declutterImageWithText_ = undefined;131 }132 /**133 * @return {import("../canvas.js").SerializableInstructions} the serializable instructions.134 */135 finish() {136 const instructions = super.finish();137 instructions.textStates = this.textStates;138 instructions.fillStates = this.fillStates;139 instructions.strokeStates = this.strokeStates;140 return instructions;141 }142 /**143 * @param {import("../../geom/SimpleGeometry.js").default|import("../Feature.js").default} geometry Geometry.144 * @param {import("../../Feature.js").FeatureLike} feature Feature.145 */146 drawText(geometry, feature) {147 const fillState = this.textFillState_;148 const strokeState = this.textStrokeState_;149 const textState = this.textState_;150 if (this.text_ === '' || !textState || (!fillState && !strokeState)) {151 return;152 }153 const coordinates = this.coordinates;154 let begin = coordinates.length;155 const geometryType = geometry.getType();156 let flatCoordinates = null;157 let stride = geometry.getStride();158 if (159 textState.placement === TextPlacement.LINE &&160 (geometryType == GeometryType.LINE_STRING ||161 geometryType == GeometryType.MULTI_LINE_STRING ||162 geometryType == GeometryType.POLYGON ||163 geometryType == GeometryType.MULTI_POLYGON)164 ) {165 if (!intersects(this.getBufferedMaxExtent(), geometry.getExtent())) {166 return;167 }168 let ends;169 flatCoordinates = geometry.getFlatCoordinates();170 if (geometryType == GeometryType.LINE_STRING) {171 ends = [flatCoordinates.length];172 } else if (geometryType == GeometryType.MULTI_LINE_STRING) {173 ends = /** @type {import("../../geom/MultiLineString.js").default} */ (174 geometry175 ).getEnds();176 } else if (geometryType == GeometryType.POLYGON) {177 ends = /** @type {import("../../geom/Polygon.js").default} */ (geometry)178 .getEnds()179 .slice(0, 1);180 } else if (geometryType == GeometryType.MULTI_POLYGON) {181 const endss =182 /** @type {import("../../geom/MultiPolygon.js").default} */ (183 geometry184 ).getEndss();185 ends = [];186 for (let i = 0, ii = endss.length; i < ii; ++i) {187 ends.push(endss[i][0]);188 }189 }190 this.beginGeometry(geometry, feature);191 const textAlign = textState.textAlign;192 // No `justify` support for line placement.193 let flatOffset = 0;194 let flatEnd;195 for (let o = 0, oo = ends.length; o < oo; ++o) {196 if (textAlign == undefined) {197 const range = matchingChunk(198 textState.maxAngle,199 flatCoordinates,200 flatOffset,201 ends[o],202 stride203 );204 flatOffset = range[0];205 flatEnd = range[1];206 } else {207 flatEnd = ends[o];208 }209 for (let i = flatOffset; i < flatEnd; i += stride) {210 coordinates.push(flatCoordinates[i], flatCoordinates[i + 1]);211 }212 const end = coordinates.length;213 flatOffset = ends[o];214 this.drawChars_(begin, end);215 begin = end;216 }217 this.endGeometry(feature);218 } else {219 let geometryWidths = textState.overflow ? null : [];220 switch (geometryType) {221 case GeometryType.POINT:222 case GeometryType.MULTI_POINT:223 flatCoordinates =224 /** @type {import("../../geom/MultiPoint.js").default} */ (225 geometry226 ).getFlatCoordinates();227 break;228 case GeometryType.LINE_STRING:229 flatCoordinates =230 /** @type {import("../../geom/LineString.js").default} */ (231 geometry232 ).getFlatMidpoint();233 break;234 case GeometryType.CIRCLE:235 flatCoordinates =236 /** @type {import("../../geom/Circle.js").default} */ (237 geometry238 ).getCenter();239 break;240 case GeometryType.MULTI_LINE_STRING:241 flatCoordinates =242 /** @type {import("../../geom/MultiLineString.js").default} */ (243 geometry244 ).getFlatMidpoints();245 stride = 2;246 break;247 case GeometryType.POLYGON:248 flatCoordinates =249 /** @type {import("../../geom/Polygon.js").default} */ (250 geometry251 ).getFlatInteriorPoint();252 if (!textState.overflow) {253 geometryWidths.push(flatCoordinates[2] / this.resolution);254 }255 stride = 3;256 break;257 case GeometryType.MULTI_POLYGON:258 const interiorPoints =259 /** @type {import("../../geom/MultiPolygon.js").default} */ (260 geometry261 ).getFlatInteriorPoints();262 flatCoordinates = [];263 for (let i = 0, ii = interiorPoints.length; i < ii; i += 3) {264 if (!textState.overflow) {265 geometryWidths.push(interiorPoints[i + 2] / this.resolution);266 }267 flatCoordinates.push(interiorPoints[i], interiorPoints[i + 1]);268 }269 if (flatCoordinates.length === 0) {270 return;271 }272 stride = 2;273 break;274 default:275 }276 const end = this.appendFlatPointCoordinates(flatCoordinates, stride);277 if (end === begin) {278 return;279 }280 if (281 geometryWidths &&282 (end - begin) / 2 !== flatCoordinates.length / stride283 ) {284 let beg = begin / 2;285 geometryWidths = geometryWidths.filter((w, i) => {286 const keep =287 coordinates[(beg + i) * 2] === flatCoordinates[i * stride] &&288 coordinates[(beg + i) * 2 + 1] === flatCoordinates[i * stride + 1];289 if (!keep) {290 --beg;291 }292 return keep;293 });294 }295 this.saveTextStates_();296 if (textState.backgroundFill || textState.backgroundStroke) {297 this.setFillStrokeStyle(298 textState.backgroundFill,299 textState.backgroundStroke300 );301 if (textState.backgroundFill) {302 this.updateFillStyle(this.state, this.createFill);303 this.hitDetectionInstructions.push(this.createFill(this.state));304 }305 if (textState.backgroundStroke) {306 this.updateStrokeStyle(this.state, this.applyStroke);307 this.hitDetectionInstructions.push(this.createStroke(this.state));308 }309 }310 this.beginGeometry(geometry, feature);311 // adjust padding for negative scale312 let padding = textState.padding;313 if (314 padding != defaultPadding &&315 (textState.scale[0] < 0 || textState.scale[1] < 0)316 ) {317 let p0 = textState.padding[0];318 let p1 = textState.padding[1];319 let p2 = textState.padding[2];320 let p3 = textState.padding[3];321 if (textState.scale[0] < 0) {322 p1 = -p1;323 p3 = -p3;324 }325 if (textState.scale[1] < 0) {326 p0 = -p0;327 p2 = -p2;328 }329 padding = [p0, p1, p2, p3];330 }331 // The image is unknown at this stage so we pass null; it will be computed at render time.332 // For clarity, we pass NaN for offsetX, offsetY, width and height, which will be computed at333 // render time.334 const pixelRatio = this.pixelRatio;335 this.instructions.push([336 CanvasInstruction.DRAW_IMAGE,337 begin,338 end,339 null,340 NaN,341 NaN,342 NaN,343 1,344 0,345 0,346 this.textRotateWithView_,347 this.textRotation_,348 [1, 1],349 NaN,350 undefined,351 this.declutterImageWithText_,352 padding == defaultPadding353 ? defaultPadding354 : padding.map(function (p) {355 return p * pixelRatio;356 }),357 !!textState.backgroundFill,358 !!textState.backgroundStroke,359 this.text_,360 this.textKey_,361 this.strokeKey_,362 this.fillKey_,363 this.textOffsetX_,364 this.textOffsetY_,365 geometryWidths,366 ]);367 const scale = 1 / pixelRatio;368 this.hitDetectionInstructions.push([369 CanvasInstruction.DRAW_IMAGE,370 begin,371 end,372 null,373 NaN,374 NaN,375 NaN,376 1,377 0,378 0,379 this.textRotateWithView_,380 this.textRotation_,381 [scale, scale],382 NaN,383 undefined,384 this.declutterImageWithText_,385 padding,386 !!textState.backgroundFill,387 !!textState.backgroundStroke,388 this.text_,389 this.textKey_,390 this.strokeKey_,391 this.fillKey_,392 this.textOffsetX_,393 this.textOffsetY_,394 geometryWidths,395 ]);396 this.endGeometry(feature);397 }398 }399 /**400 * @private401 */402 saveTextStates_() {403 const strokeState = this.textStrokeState_;404 const textState = this.textState_;405 const fillState = this.textFillState_;406 const strokeKey = this.strokeKey_;407 if (strokeState) {408 if (!(strokeKey in this.strokeStates)) {409 this.strokeStates[strokeKey] = {410 strokeStyle: strokeState.strokeStyle,411 lineCap: strokeState.lineCap,412 lineDashOffset: strokeState.lineDashOffset,413 lineWidth: strokeState.lineWidth,414 lineJoin: strokeState.lineJoin,415 miterLimit: strokeState.miterLimit,416 lineDash: strokeState.lineDash,417 };418 }419 }420 const textKey = this.textKey_;421 if (!(textKey in this.textStates)) {422 this.textStates[textKey] = {423 font: textState.font,424 textAlign: textState.textAlign || defaultTextAlign,425 justify: textState.justify,426 textBaseline: textState.textBaseline || defaultTextBaseline,427 scale: textState.scale,428 };429 }430 const fillKey = this.fillKey_;431 if (fillState) {432 if (!(fillKey in this.fillStates)) {433 this.fillStates[fillKey] = {434 fillStyle: fillState.fillStyle,435 };436 }437 }438 }439 /**440 * @private441 * @param {number} begin Begin.442 * @param {number} end End.443 */444 drawChars_(begin, end) {445 const strokeState = this.textStrokeState_;446 const textState = this.textState_;447 const strokeKey = this.strokeKey_;448 const textKey = this.textKey_;449 const fillKey = this.fillKey_;450 this.saveTextStates_();451 const pixelRatio = this.pixelRatio;452 const baseline = TEXT_ALIGN[textState.textBaseline];453 const offsetY = this.textOffsetY_ * pixelRatio;454 const text = this.text_;455 const strokeWidth = strokeState456 ? (strokeState.lineWidth * Math.abs(textState.scale[0])) / 2457 : 0;458 this.instructions.push([459 CanvasInstruction.DRAW_CHARS,460 begin,461 end,462 baseline,463 textState.overflow,464 fillKey,465 textState.maxAngle,466 pixelRatio,467 offsetY,468 strokeKey,469 strokeWidth * pixelRatio,470 text,471 textKey,472 1,473 ]);474 this.hitDetectionInstructions.push([475 CanvasInstruction.DRAW_CHARS,476 begin,477 end,478 baseline,479 textState.overflow,480 fillKey,481 textState.maxAngle,482 1,483 offsetY,484 strokeKey,485 strokeWidth,486 text,487 textKey,488 1 / pixelRatio,489 ]);490 }491 /**492 * @param {import("../../style/Text.js").default} textStyle Text style.493 * @param {Object} [opt_sharedData] Shared data.494 */495 setTextStyle(textStyle, opt_sharedData) {496 let textState, fillState, strokeState;497 if (!textStyle) {498 this.text_ = '';499 } else {500 const textFillStyle = textStyle.getFill();501 if (!textFillStyle) {502 fillState = null;503 this.textFillState_ = fillState;504 } else {505 fillState = this.textFillState_;506 if (!fillState) {507 fillState = /** @type {import("../canvas.js").FillState} */ ({});508 this.textFillState_ = fillState;509 }510 fillState.fillStyle = asColorLike(511 textFillStyle.getColor() || defaultFillStyle512 );513 }514 const textStrokeStyle = textStyle.getStroke();515 if (!textStrokeStyle) {516 strokeState = null;517 this.textStrokeState_ = strokeState;518 } else {519 strokeState = this.textStrokeState_;520 if (!strokeState) {521 strokeState = /** @type {import("../canvas.js").StrokeState} */ ({});522 this.textStrokeState_ = strokeState;523 }524 const lineDash = textStrokeStyle.getLineDash();525 const lineDashOffset = textStrokeStyle.getLineDashOffset();526 const lineWidth = textStrokeStyle.getWidth();527 const miterLimit = textStrokeStyle.getMiterLimit();528 strokeState.lineCap = textStrokeStyle.getLineCap() || defaultLineCap;529 strokeState.lineDash = lineDash ? lineDash.slice() : defaultLineDash;530 strokeState.lineDashOffset =531 lineDashOffset === undefined ? defaultLineDashOffset : lineDashOffset;532 strokeState.lineJoin = textStrokeStyle.getLineJoin() || defaultLineJoin;533 strokeState.lineWidth =534 lineWidth === undefined ? defaultLineWidth : lineWidth;535 strokeState.miterLimit =536 miterLimit === undefined ? defaultMiterLimit : miterLimit;537 strokeState.strokeStyle = asColorLike(538 textStrokeStyle.getColor() || defaultStrokeStyle539 );540 }541 textState = this.textState_;542 const font = textStyle.getFont() || defaultFont;543 registerFont(font);544 const textScale = textStyle.getScaleArray();545 textState.overflow = textStyle.getOverflow();546 textState.font = font;547 textState.maxAngle = textStyle.getMaxAngle();548 textState.placement = textStyle.getPlacement();549 textState.textAlign = textStyle.getTextAlign();550 textState.justify = textStyle.getJustify();551 textState.textBaseline =552 textStyle.getTextBaseline() || defaultTextBaseline;553 textState.backgroundFill = textStyle.getBackgroundFill();554 textState.backgroundStroke = textStyle.getBackgroundStroke();555 textState.padding = textStyle.getPadding() || defaultPadding;556 textState.scale = textScale === undefined ? [1, 1] : textScale;557 const textOffsetX = textStyle.getOffsetX();558 const textOffsetY = textStyle.getOffsetY();559 const textRotateWithView = textStyle.getRotateWithView();560 const textRotation = textStyle.getRotation();561 this.text_ = textStyle.getText() || '';562 this.textOffsetX_ = textOffsetX === undefined ? 0 : textOffsetX;563 this.textOffsetY_ = textOffsetY === undefined ? 0 : textOffsetY;564 this.textRotateWithView_ =565 textRotateWithView === undefined ? false : textRotateWithView;566 this.textRotation_ = textRotation === undefined ? 0 : textRotation;567 this.strokeKey_ = strokeState568 ? (typeof strokeState.strokeStyle == 'string'569 ? strokeState.strokeStyle570 : getUid(strokeState.strokeStyle)) +571 strokeState.lineCap +572 strokeState.lineDashOffset +573 '|' +574 strokeState.lineWidth +575 strokeState.lineJoin +576 strokeState.miterLimit +577 '[' +578 strokeState.lineDash.join() +579 ']'580 : '';581 this.textKey_ =582 textState.font +583 textState.scale +584 (textState.textAlign || '?') +585 (textState.justify || '?') +586 (textState.textBaseline || '?');587 this.fillKey_ = fillState588 ? typeof fillState.fillStyle == 'string'589 ? fillState.fillStyle590 : '|' + getUid(fillState.fillStyle)591 : '';592 }593 this.declutterImageWithText_ = opt_sharedData;594 }595}...

Full Screen

Full Screen

LB_HangulTypingAnimation.js

Source:LB_HangulTypingAnimation.js Github

copy

Full Screen

1//=============================================================================2// LB_HangulTypingAnimation.js3//=============================================================================4/**5 * Copyright (c) 2021 lunabunn6 *7 * This software is provided 'as-is', without any express or implied8 * warranty. In no event will the authors be held liable for any damages9 * arising from the use of this software.10 *11 * Permission is granted to anyone to use this software for any purpose,12 * including commercial applications, and to alter it and redistribute it13 * freely, subject to the following restrictions:14 *15 * 1. The origin of this software must not be misrepresented; you must not16 * claim that you wrote the original software. If you use this software17 * in a product, an acknowledgment in the product documentation would be18 * appreciated but is not required.19 * 2. Altered source versions must be plainly marked as such, and must not be20 * misrepresented as being the original software.21 * 3. This notice may not be removed or altered from any source distribution.22 */23/*:24 * @plugindesc 대화창의 한글 텍스트에 타자 효과를 주는 플러그인입니다.25 * @author Lunabunn26 *27 * @help \HTA[1]과 \HTA[0] 메시지 코드를 사용하여 타자 효과를 켜고 끌 수 있습니다.28 * 별도의 파라미터 없이 \HTA만 사용해 토글도 가능합니다.29 * 30 * 기본 MV에서는 대화창의 입력 속도가 너무 빨라 타자 효과가 제대로 보이지31 * 않을 수 있습니다. Kino 님의 SlowText 플러그인 등 대화창의 입력 속도를32 * 조정하는 플러그인의 사용을 권장합니다.33 * 34 * SlowText 플러그인 사용시 정상적인 작동을 위해서는 플러그인 관리 창에서35 * 본 플러그인의 상단에 배치해 주세요. 플러그인 배치 순서가 잘못되었을 경우36 * 일부 기능이 작동하지 않을 수 있습니다.37 * 38 * Yanfly 님의 Message Core를 포함한 타 메시지 플러그인과의 호환성은 테스트되지39 * 않았으며, 호환되지 않을 가능성이 매우 높습니다.40 * 41 * 호환성, 기능 추가, 버그픽스 등의 문의 사항이 있으실 경우 연락 주세요.42 * https://github.com/lunabunn/misc-plugins-mv43 * 44 * 45 * @param enabled46 * @text 기본으로 활성화47 * @desc 타자 효과를 기본으로 활성화할지 여부를 설정합니다.48 * @type boolean49 * @default false50 */51{52 let enabled = PluginManager.parameters("LB_HangulTypingAnimation")["enabled"] === "true";53 const Window_initialize = Window.prototype.initialize;54 Window.prototype.initialize = function () {55 Window_initialize.call(this);56 if (Window_Message.prototype.isPrototypeOf(this)) {57 this._htaSprite = new Sprite();58 this.addChild(this._htaSprite);59 }60 };61 const Window_Message__refreshContents = Window_Message.prototype._refreshContents;62 Window_Message.prototype._refreshContents = function () {63 Window_Message__refreshContents.call(this);64 this._htaSprite.move(this.padding, this.padding);65 };66 const Window_Message__updateContents = Window_Message.prototype._updateContents;67 Window_Message.prototype._updateContents = function () {68 Window_Message__updateContents.call(this);69 this._htaSprite.setFrame(70 this._windowContentsSprite._frame.x,71 this._windowContentsSprite._frame.y,72 this._windowContentsSprite._frame.width,73 this._windowContentsSprite._frame.height74 );75 this._htaSprite.visible = this._windowContentsSprite.visible;76 };77 const Window_Message_createContents = Window_Message.prototype.createContents;78 Window_Message.prototype.createContents = function () {79 this._htaSprite.bitmap = new Bitmap(this.contentsWidth(), this.contentsHeight());80 Window_Message_createContents.call(this);81 };82 const Window_Message_resetFontSettings = Window_Message.prototype.resetFontSettings;83 Window_Message.prototype.resetFontSettings = function () {84 Window_Message_resetFontSettings.call(this);85 this._htaSprite.bitmap.fontFace = this.contents.fontFace;86 this._htaSprite.bitmap.fontSize = this.contents.fontSize;87 };88 const Window_Message_changeTextColor = Window_Message.prototype.changeTextColor;89 Window_Message.prototype.changeTextColor = function (color) {90 Window_Message_changeTextColor.call(this, color);91 this._htaSprite.bitmap.textColor = this.contents.textColor;92 };93 const Window_Message_changePaintOpacity = Window_Message.prototype.changePaintOpacity;94 Window_Message.prototype.changePaintOpacity = function (enabled) {95 Window_Message_changePaintOpacity.call(this, enabled);96 this._htaSprite.bitmap.paintOpacity = this.contents.paintOpacity;97 };98 const Window_Message_newPage = Window_Message.prototype.newPage;99 Window_Message.prototype.newPage = function (textState) {100 this._htaSprite.bitmap.clear();101 Window_Message_newPage.call(this, textState);102 };103 const Window_Message_startMessage = Window_Message.prototype.startMessage;104 Window_Message.prototype.startMessage = function () {105 Window_Message_startMessage.call(this);106 this._textState._hangulSteps = [];107 };108 const Window_Message_processEscapeCharacter = Window_Message.prototype.processEscapeCharacter;109 Window_Message.prototype.processEscapeCharacter = function (code, textState) {110 console.log(code);111 if (code === "HTA") {112 console.log(textState.text.slice(textState.index));113 let param = this.obtainEscapeParam(textState);114 if (param) {115 enabled = param != 0;116 } else {117 enabled = !enabled;118 }119 return;120 }121 Window_Message_processEscapeCharacter.call(this, code, textState);122 };123 function combineHangul(cho, jung, jong) {124 return String.fromCharCode((((cho * 21) + jung) * 28) + jong + 0xAC00);125 }126 function getHangulSteps(c) {127 let code = c.charCodeAt(0);128 code -= 0xAC00;129 if (code < 0 || code > 11171) {130 return null;131 }132 let jong = code % 28;133 code -= jong;134 code /= 28;135 let jung = code % 21;136 code -= jung;137 code /= 21;138 let cho = code % 28;139 let steps = [];140 // add lone cho141 steps.push(["ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ", "ㅁ", "ㅂ", "ㅃ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅉ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"][cho]);142 // add cho + jung143 if (jung >= 9 && jung <= 11) {144 // add intermediary ㅗ for ㅘ/ㅙ/ㅚ145 steps.push(combineHangul(cho, 8, 0));146 } else if (jung >= 14 && jung <= 16) {147 // add intermediary ㅜ for ㅝ/ㅞ/ㅟ148 steps.push(combineHangul(cho, 13, 0));149 }150 steps.push(combineHangul(cho, jung, 0));151 // add cho + jung + jong152 if (jong != 0) {153 if (jong == 3) {154 // add intermediary ㄱ for ㄳ155 steps.push(combineHangul(cho, jung, 1));156 } else if (jong == 5 || jong == 6) {157 // add intermediary ㄴ for ㄵ/ㄶ158 steps.push(combineHangul(cho, jung, 4));159 } else if (jong >= 9 && jong <= 15) {160 // add intermediary ㄹ for ㄺ/ㄻ/ㄼ/ㄽ/ㄾ/ㄿ/ㅀ161 steps.push(combineHangul(cho, jung, 8));162 }163 steps.push(combineHangul(cho, jung, jong));164 }165 return steps;166 }167 Window_Base_processNormalCharacter = Window_Base.prototype.processNormalCharacter;168 Window_Base.prototype.processNormalCharacter = function (textState) {169 if (enabled && Window_Message.prototype.isPrototypeOf(this)) {170 if (!textState._hangulSteps.length) {171 let c = textState.text[textState.index];172 let steps = getHangulSteps(c);173 if (steps) {174 textState._hangulSteps = steps;175 } else {176 var w = this.textWidth(c);177 this.contents.drawText(c, textState.x, textState.y, w * 2, textState.height);178 textState.x += w;179 textState.index++;180 return;181 }182 }183 let c = textState._hangulSteps.shift();184 if (!textState._hangulSteps.length) {185 this._htaSprite.bitmap.clear();186 var w = this.textWidth(c);187 this.contents.drawText(c, textState.x, textState.y, w * 2, textState.height);188 textState.x += w;189 textState.index++;190 } else {191 this._htaSprite.bitmap.clear();192 this._htaSprite.bitmap.drawText(c, textState.x, textState.y, w * 2, textState.height);193 }194 } else {195 Window_Base_processNormalCharacter.call(this, textState);196 }197 };...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var textState = new TextState();2textState.text = 'Hello World';3textState.x = 100;4textState.y = 100;5textState.fontSize = 24;6textState.outlineWidth = 4;7textState.outlineColor = 'black';8textState.textColor = 'white';9textState.fontFace = 'Arial';10textState.fontWeight = 'bold';11textState.letterSpacing = 0;12textState.align = 'left';13textState.verticalAlign = 'top';14textState.maxWidth = 0;15textState.maxHeight = 0;16textState.lineHeight = 0;17textState.letterSpacing = 0;18textState.shadowBlur = 0;19textState.shadowColor = 'black';20textState.shadowOffsetX = 0;21textState.shadowOffsetY = 0;22textState.strokeWidth = 0;23textState.strokeColor = 'black';24textState.strokeOnly = false;25textState.drawOutline = true;26textState.drawShadow = true;27textState.drawStroke = true;28textState.drawFontFace = true;29textState.drawText = true;30textState.drawTextOutline = true;31textState.drawTextShadow = true;32textState.drawTextStroke = true;33textState.drawTextFill = true;34textState.drawBitmap = false;35textState.bitmapFont = null;36textState.bitmapFontSize = 0;37textState.bitmapFontItalic = false;38textState.bitmapFontBold = false;39textState.bitmapFontOutlineWidth = 0;40textState.bitmapFontOutlineColor = 'black';41textState.bitmapFontShadowBlur = 0;42textState.bitmapFontShadowColor = 'black';43textState.bitmapFontShadowOffsetX = 0;44textState.bitmapFontShadowOffsetY = 0;45textState.bitmapFontStrokeWidth = 0;46textState.bitmapFontStrokeColor = 'black';47textState.bitmapFontStrokeOnly = false;48textState.bitmapFontDrawOutline = true;49textState.bitmapFontDrawShadow = true;50textState.bitmapFontDrawStroke = true;51textState.bitmapFontDrawFontFace = true;52textState.bitmapFontDrawText = true;53textState.bitmapFontDrawTextOutline = true;54textState.bitmapFontDrawTextShadow = true;55textState.bitmapFontDrawTextStroke = true;56textState.bitmapFontDrawTextFill = true;57textState.bitmapFontDrawBitmap = true;58textState.bitmapFontDrawAll = true;

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var editor = document.getElementById("editor");2var textState = editor.textState;3var selection = textState.selection;4var range = selection.getRangeAt(0);5var startContainer = range.startContainer;6var endContainer = range.endContainer;7var startOffset = range.startOffset;8var endOffset = range.endOffset;9var text = textState.text;10var textLength = textState.textLength;11var textLines = textState.textLines;12var textLineCount = textState.textLineCount;13var textLineAt = textState.textLineAt(0);14var textLineIndex = textState.textLineIndex(0);15var textLineLength = textState.textLineLength(0);16var textLineStart = textState.textLineStart(0);17var textLineEnd = textState.textLineEnd(0);18var textLineRect = textState.textLineRect(0);19var textLineAtPoint = textState.textLineAtPoint(0, 0);20var textLineRange = textState.textLineRange(0, 0);21var textLineRangeAt = textState.textLineRangeAt(0);22var textLineRangeRect = textState.textLineRangeRect(0, 0);23var textLineRangeAtPoint = textState.textLineRangeAtPoint(0, 0, 0);24var textLineRangeAtPoint2 = textState.textLineRangeAtPoint(0, 0, 0, 0);25var textLineRangeAtPoint3 = textState.textLineRangeAtPoint(0, 0, 0, 0, 0);26var textLineRangeAtPoint4 = textState.textLineRangeAtPoint(0, 0, 0, 0, 0, 0);27var textLineRangeAtPoint5 = textState.textLineRangeAtPoint(0, 0, 0, 0, 0, 0, 0);28var textLineRangeAtPoint6 = textState.textLineRangeAtPoint(0, 0, 0, 0, 0, 0, 0, 0);29var textLineRangeAtPoint7 = textState.textLineRangeAtPoint(0, 0, 0, 0, 0, 0, 0, 0, 0);30var textLineRangeAtPoint8 = textState.textLineRangeAtPoint(0, 0

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptext = require('wptext');2var textState = new wptext.TextState();3textState.setText("Hello World");4console.log(textState.getText());5console.log(textState.length());6console.log(textState.width());7console.log(textState.height());8console.log(textState.fontSize());9textState.fontSize(20);10console.log(textState.fontFace());11textState.fontFace("Arial");12console.log(textState.fontWeight());13textState.fontWeight("bold");14console.log(textState.fontStyle());15textState.fontStyle("italic");16console.log(textState.lineHeight());17textState.lineHeight(20);18console.log(textState.align());19textState.align("center");20console.log(textState.color());21textState.color("red");22console.log(textState.strokeColor());23textState.strokeColor("black");24console.log(textState.strokeWidth());25textState.strokeWidth(2);26console.log(textState.shadowColor());27textState.shadowColor("black");28console.log(textState.shadowBlur());29textState.shadowBlur(2);30console.log(textState.shadowX());31textState.shadowX(2);32console.log(textState.shadowY());33textState.shadowY(2);34console.log(textState.outlineColor());35textState.outlineColor("black");36console.log(textState.outlineWidth());37textState.outlineWidth(2);38console.log(textState.outlineBlur());39textState.outlineBlur(2);40console.log(text

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptext = require('wptext');2var textState = new wptext.TextState();3textState.setText("Hello World");4console.log(textState.getText());5console.log(textState.length());6console.log(textState.width());7console.log(textState.height());8console.log(textState.fontSize());9textState.fontSize(20);10console.log(textState.fontFace());11textState.fontFace("Arial");12console.log(textState.fontWeight());13textState.fontWeight("bold");14console.log(textState.fontStyle());15textState.fontStyle("italic");16console.log(textState.lineHeight());17textState.lineHeight(20);18console.log(textState.aligll(true);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1textState.align("center");2console.log(textState.color());3textState.color("red");4console.log(textState.strokeColor());5textState.strokeColor("black");6console.log(textState.strokeWidth());7textState.strokeWidth(2);8console.log(textState.shadowColor());9textState.shadowColor("black");10console.log(textState.shadowBlur());11textState.shadowBlur(2);12console.log(textState.shadowX());13textState.shadowX(2);14console.log(textState.shadowY());15textState.shadowY(2);16console.log(textState.outlineColor());17textState.outlineColor("black");18console.log(textState.outlineWidth());19textState.outlineWidth(2);20console.log(textState.outlineBlur());21textState.outlineBlur(2);22console.log(text

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run wpt automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful