| // Copyright 2013 The Flutter Authors. All rights reserved. |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| // TODO(yjbanov): Consider the following optimizations: |
| // - Switch from JSON to typed arrays. See: |
| // https://github.com/w3c/css-houdini-drafts/issues/136 |
| // - When there is no DOM-rendered content, then clipping in the canvas is more |
| // efficient than DOM-rendered clipping. |
| // - When DOM-rendered clip is the only option, then clipping _again_ in the |
| // canvas is superfluous. |
| // - When transform is a 2D transform and there is no DOM-rendered content, then |
| // canvas transform is more efficient than DOM-rendered transform. |
| // - If a transform must be DOM-rendered, then clipping in the canvas _again_ is |
| // superfluous. |
| |
| /** |
| * Applies paint commands to CSS Paint API (a.k.a. Houdini). |
| * |
| * This painter is driven by houdini_canvas.dart. This painter and the |
| * HoudiniCanvas class must be kept in sync with each other. |
| */ |
| class FlutterPainter { |
| /** |
| * Properties used by this painter. |
| * |
| * @return {string[]} list of CSS properties this painter depends on. |
| */ |
| static get inputProperties() { |
| return ['--flt']; |
| } |
| |
| /** |
| * Implements the painter interface. |
| */ |
| paint(ctx, geom, properties) { |
| let fltProp = properties.get('--flt').toString(); |
| if (!fltProp) { |
| // Nothing to paint. |
| return; |
| } |
| const commands = JSON.parse(fltProp); |
| for (let i = 0; i < commands.length; i++) { |
| let command = commands[i]; |
| // TODO(yjbanov): we should probably move command identifiers into an enum |
| switch (command[0]) { |
| case 1: |
| this._save(ctx, geom, command); |
| break; |
| case 2: |
| this._restore(ctx, geom, command); |
| break; |
| case 3: |
| this._translate(ctx, geom, command); |
| break; |
| case 4: |
| this._scale(ctx, geom, command); |
| break; |
| case 5: |
| this._rotate(ctx, geom, command); |
| break; |
| // Skip case 6: implemented in the DOM for now. |
| case 7: |
| this._skew(ctx, geom, command); |
| break; |
| case 8: |
| this._clipRect(ctx, geom, command); |
| break; |
| case 9: |
| this._clipRRect(ctx, geom, command); |
| break; |
| case 10: |
| this._clipPath(ctx, geom, command); |
| break; |
| case 11: |
| this._drawColor(ctx, geom, command); |
| break; |
| case 12: |
| this._drawLine(ctx, geom, command); |
| break; |
| case 13: |
| this._drawPaint(ctx, geom, command); |
| break; |
| case 14: |
| this._drawRect(ctx, geom, command); |
| break; |
| case 15: |
| this._drawRRect(ctx, geom, command); |
| break; |
| case 16: |
| this._drawDRRect(ctx, geom, command); |
| break; |
| case 17: |
| this._drawOval(ctx, geom, command); |
| break; |
| case 18: |
| this._drawCircle(ctx, geom, command); |
| break; |
| case 19: |
| this._drawPath(ctx, geom, command); |
| break; |
| case 20: |
| this._drawShadow(ctx, geom, command); |
| break; |
| default: |
| throw new Error(`Unsupported command ID: ${command[0]}`); |
| } |
| } |
| } |
| |
| _applyPaint(ctx, paint) { |
| let blendMode = _stringForBlendMode(paint.blendMode); |
| ctx.globalCompositeOperation = blendMode ? blendMode : 'source-over'; |
| ctx.lineWidth = paint.strokeWidth ? paint.strokeWidth : 1.0; |
| |
| let strokeCap = _stringForStrokeCap(paint.strokeCap); |
| ctx.lineCap = strokeCap ? strokeCap : 'butt'; |
| |
| if (paint.shader != null) { |
| let paintStyle = paint.shader.createPaintStyle(ctx); |
| ctx.fillStyle = paintStyle; |
| ctx.strokeStyle = paintStyle; |
| } else if (paint.color != null) { |
| let colorString = paint.color; |
| ctx.fillStyle = colorString; |
| ctx.strokeStyle = colorString; |
| } |
| if (paint.maskFilter != null) { |
| ctx.filter = `blur(${paint.maskFilter[1]}px)`; |
| } |
| } |
| |
| _strokeOrFill(ctx, paint, resetPaint) { |
| switch (paint.style) { |
| case PaintingStyle.stroke: |
| ctx.stroke(); |
| break; |
| case PaintingStyle.fill: |
| default: |
| ctx.fill(); |
| break; |
| } |
| if (resetPaint) { |
| this._resetPaint(ctx); |
| } |
| } |
| |
| _resetPaint(ctx) { |
| ctx.globalCompositeOperation = 'source-over'; |
| ctx.lineWidth = 1.0; |
| ctx.lineCap = 'butt'; |
| ctx.filter = 'none'; |
| ctx.fillStyle = null; |
| ctx.strokeStyle = null; |
| } |
| |
| _save(ctx, geom, command) { |
| ctx.save(); |
| } |
| |
| _restore(ctx, geom, command) { |
| ctx.restore(); |
| } |
| |
| _translate(ctx, geom, command) { |
| ctx.translate(command[1], command[2]); |
| } |
| |
| _scale(ctx, geom, command) { |
| ctx.translate(command[1], command[2]); |
| } |
| |
| _rotate(ctx, geom, command) { |
| ctx.rotate(command[1]); |
| } |
| |
| _skew(ctx, geom, command) { |
| ctx.translate(command[1], command[2]); |
| } |
| |
| _drawRect(ctx, geom, command) { |
| let scanner = _scanCommand(command); |
| let rect = scanner.scanRect(); |
| let paint = scanner.scanPaint(); |
| this._applyPaint(ctx, paint); |
| ctx.beginPath(); |
| ctx.rect(rect.left, rect.top, rect.width(), rect.height()); |
| this._strokeOrFill(ctx, paint, true); |
| } |
| |
| _drawRRect(ctx, geom, command) { |
| let scanner = _scanCommand(command); |
| let rrect = scanner.scanRRect(); |
| let paint = scanner.scanPaint(); |
| |
| this._applyPaint(ctx, paint); |
| this._drawRRectPath(ctx, rrect, true); |
| this._strokeOrFill(ctx, paint, true); |
| } |
| |
| _drawDRRect(ctx, geom, command) { |
| let scanner = _scanCommand(command); |
| let outer = scanner.scanRRect(); |
| let inner = scanner.scanRRect(); |
| let paint = scanner.scanPaint(); |
| this._applyPaint(ctx, paint); |
| this._drawRRectPath(ctx, outer, true); |
| this._drawRRectPathReverse(ctx, inner, false); |
| this._strokeOrFill(ctx, paint, true); |
| } |
| |
| _drawRRectPath(ctx, rrect, startNewPath) { |
| // TODO(mdebbar): there's a bug in this code, it doesn't correctly handle |
| // the case when the radius is greater than the width of the |
| // rect. When we fix that in BitmapCanvas, we need to fix it |
| // here too. |
| // To draw the rounded rectangle, perform the following 8 steps: |
| // 1. draw the line for the top |
| // 2. draw the arc for the top-right corner |
| // 3. draw the line for the right side |
| // 4. draw the arc for the bottom-right corner |
| // 5. draw the line for the bottom of the rectangle |
| // 6. draw the arc for the bottom-left corner |
| // 7. draw the line for the left side |
| // 8. draw the arc for the top-left corner |
| // |
| // After drawing, the current point will be the left side of the top of the |
| // rounded rectangle (after the corner). |
| // TODO(het): Confirm that this is the end point in Flutter for RRect |
| |
| if (startNewPath) { |
| ctx.beginPath(); |
| } |
| |
| ctx.moveTo(rrect.left + rrect.trRadiusX, rrect.top); |
| |
| // Top side and top-right corner |
| ctx.lineTo(rrect.right - rrect.trRadiusX, rrect.top); |
| ctx.ellipse( |
| rrect.right - rrect.trRadiusX, |
| rrect.top + rrect.trRadiusY, |
| rrect.trRadiusX, |
| rrect.trRadiusY, |
| 0, |
| 1.5 * Math.PI, |
| 2.0 * Math.PI, |
| false, |
| ); |
| |
| // Right side and bottom-right corner |
| ctx.lineTo(rrect.right, rrect.bottom - rrect.brRadiusY); |
| ctx.ellipse( |
| rrect.right - rrect.brRadiusX, |
| rrect.bottom - rrect.brRadiusY, |
| rrect.brRadiusX, |
| rrect.brRadiusY, |
| 0, |
| 0, |
| 0.5 * Math.PI, |
| false, |
| ); |
| |
| // Bottom side and bottom-left corner |
| ctx.lineTo(rrect.left + rrect.blRadiusX, rrect.bottom); |
| ctx.ellipse( |
| rrect.left + rrect.blRadiusX, |
| rrect.bottom - rrect.blRadiusY, |
| rrect.blRadiusX, |
| rrect.blRadiusY, |
| 0, |
| 0.5 * Math.PI, |
| Math.PI, |
| false, |
| ); |
| |
| // Left side and top-left corner |
| ctx.lineTo(rrect.left, rrect.top + rrect.tlRadiusY); |
| ctx.ellipse( |
| rrect.left + rrect.tlRadiusX, |
| rrect.top + rrect.tlRadiusY, |
| rrect.tlRadiusX, |
| rrect.tlRadiusY, |
| 0, |
| Math.PI, |
| 1.5 * Math.PI, |
| false, |
| ); |
| } |
| |
| _drawRRectPathReverse(ctx, rrect, startNewPath) { |
| // Draw the rounded rectangle, counterclockwise. |
| ctx.moveTo(rrect.right - rrect.trRadiusX, rrect.top); |
| |
| if (startNewPath) { |
| ctx.beginPath(); |
| } |
| |
| // Top side and top-left corner |
| ctx.lineTo(rrect.left + rrect.tlRadiusX, rrect.top); |
| ctx.ellipse( |
| rrect.left + rrect.tlRadiusX, |
| rrect.top + rrect.tlRadiusY, |
| rrect.tlRadiusX, |
| rrect.tlRadiusY, |
| 0, |
| 1.5 * Math.PI, |
| Math.PI, |
| true, |
| ); |
| |
| // Left side and bottom-left corner |
| ctx.lineTo(rrect.left, rrect.bottom - rrect.blRadiusY); |
| ctx.ellipse( |
| rrect.left + rrect.blRadiusX, |
| rrect.bottom - rrect.blRadiusY, |
| rrect.blRadiusX, |
| rrect.blRadiusY, |
| 0, |
| Math.PI, |
| 0.5 * Math.PI, |
| true, |
| ); |
| |
| // Bottom side and bottom-right corner |
| ctx.lineTo(rrect.right - rrect.brRadiusX, rrect.bottom); |
| ctx.ellipse( |
| rrect.right - rrect.brRadiusX, |
| rrect.bottom - rrect.brRadiusY, |
| rrect.brRadiusX, |
| rrect.brRadiusY, |
| 0, |
| 0.5 * Math.PI, |
| 0, |
| true, |
| ); |
| |
| // Right side and top-right corner |
| ctx.lineTo(rrect.right, rrect.top + rrect.trRadiusY); |
| ctx.ellipse( |
| rrect.right - rrect.trRadiusX, |
| rrect.top + rrect.trRadiusY, |
| rrect.trRadiusX, |
| rrect.trRadiusY, |
| 0, |
| 0, |
| 1.5 * Math.PI, |
| true, |
| ); |
| } |
| |
| _clipRect(ctx, geom, command) { |
| let scanner = _scanCommand(command); |
| let rect = scanner.scanRect(); |
| ctx.beginPath(); |
| ctx.rect(rect.left, rect.top, rect.width(), rect.height()); |
| ctx.clip(); |
| } |
| |
| _clipRRect(ctx, geom, command) { |
| let path = new Path([]); |
| let commands = [new RRectCommand(command[1])]; |
| path.subpaths.push(new Subpath(commands)); |
| this._runPath(ctx, path); |
| ctx.clip(); |
| } |
| |
| _clipPath(ctx, geom, command) { |
| let scanner = _scanCommand(command); |
| let path = scanner.scanPath(); |
| this._runPath(ctx, path); |
| ctx.clip(); |
| } |
| |
| _drawCircle(ctx, geom, command) { |
| let scanner = _scanCommand(command); |
| let dx = scanner.scanNumber(); |
| let dy = scanner.scanNumber(); |
| let radius = scanner.scanNumber(); |
| let paint = scanner.scanPaint(); |
| |
| this._applyPaint(ctx, paint); |
| ctx.beginPath(); |
| ctx.ellipse(dx, dy, radius, radius, 0, 0, 2.0 * Math.PI, false); |
| this._strokeOrFill(ctx, paint, true); |
| } |
| |
| _drawOval(ctx, geom, command) { |
| let scanner = _scanCommand(command); |
| let rect = scanner.scanRect(); |
| let paint = scanner.scanPaint(); |
| |
| this._applyPaint(ctx, paint); |
| ctx.beginPath(); |
| ctx.ellipse( |
| (rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2, |
| rect.width / 2, rect.height / 2, 0, 0, 2.0 * Math.PI, false); |
| this._strokeOrFill(ctx, paint, true); |
| } |
| |
| _drawPath(ctx, geom, command) { |
| let scanner = _scanCommand(command); |
| let path = scanner.scanPath(); |
| let paint = scanner.scanPaint(); |
| this._applyPaint(ctx, paint); |
| this._runPath(ctx, path); |
| this._strokeOrFill(ctx, paint, true); |
| } |
| |
| _drawShadow(ctx, geom, command) { |
| // TODO: this is mostly a stub; implement properly. |
| let scanner = _scanCommand(command); |
| let path = scanner.scanPath(); |
| let color = scanner.scanArray(); |
| let elevation = scanner.scanNumber(); |
| let transparentOccluder = scanner.scanBool(); |
| |
| let shadows = _computeShadowsForElevation(elevation, color); |
| for (let i = 0; i < shadows.length; i++) { |
| let shadow = shadows[i]; |
| |
| let paint = new Paint( |
| null, // blendMode |
| PaintingStyle.fill, // style |
| 1.0, // strokeWidth |
| null, // strokeCap |
| true, // isAntialias |
| shadow.color, // color |
| null, // shader |
| [BlurStyle.normal, shadow.blur], // maskFilter |
| null, // filterQuality |
| null // colorFilter |
| ); |
| |
| ctx.save(); |
| ctx.translate(shadow.offsetX, shadow.offsetY); |
| this._applyPaint(ctx, paint); |
| this._runPath(ctx, path, true); |
| this._strokeOrFill(ctx, paint, false); |
| ctx.restore(); |
| } |
| this._resetPaint(ctx); |
| } |
| |
| _runPath(ctx, path) { |
| ctx.beginPath(); |
| for (let i = 0; i < path.subpaths.length; i++) { |
| let subpath = path.subpaths[i]; |
| for (let j = 0; j < subpath.commands.length; j++) { |
| let command = subpath.commands[j]; |
| switch (command.type()) { |
| case PathCommandType.bezierCurveTo: |
| ctx.bezierCurveTo( |
| command.x1, command.y1, command.x2, command.y2, command.x3, |
| command.y3); |
| break; |
| case PathCommandType.close: |
| ctx.closePath(); |
| break; |
| case PathCommandType.ellipse: |
| ctx.ellipse( |
| command.x, command.y, command.radiusX, command.radiusY, |
| command.rotation, command.startAngle, command.endAngle, |
| command.anticlockwise); |
| break; |
| case PathCommandType.lineTo: |
| ctx.lineTo(command.x, command.y); |
| break; |
| case PathCommandType.moveTo: |
| ctx.moveTo(command.x, command.y); |
| break; |
| case PathCommandType.rrect: |
| this._drawRRectPath(ctx, command.rrect, false); |
| break; |
| case PathCommandType.rect: |
| ctx.rect(command.x, command.y, command.width, command.height); |
| break; |
| case PathCommandType.quadraticCurveTo: |
| ctx.quadraticCurveTo( |
| command.x1, command.y1, command.x2, command.y2); |
| break; |
| default: |
| throw new Error(`Unknown path command ${command.type()}`); |
| } |
| } |
| } |
| } |
| |
| _drawColor(ctx, geom, command) { |
| ctx.globalCompositeOperation = _stringForBlendMode(command[2]); |
| ctx.fillStyle = command[1]; |
| |
| // Fill a virtually infinite rect with the color. |
| // |
| // We can't use (0, 0, width, height) because the current transform can |
| // cause it to not fill the entire clip. |
| ctx.fillRect(-10000, -10000, 20000, 20000); |
| this._resetPaint(ctx); |
| } |
| |
| _drawLine(ctx, geom, command) { |
| let scanner = _scanCommand(command); |
| let p1dx = scanner.scanNumber(); |
| let p1dy = scanner.scanNumber(); |
| let p2dx = scanner.scanNumber(); |
| let p2dy = scanner.scanNumber(); |
| let paint = scanner.scanPaint(); |
| this._applyPaint(ctx, paint); |
| ctx.beginPath(); |
| ctx.moveTo(p1dx, p1dy); |
| ctx.lineTo(p2dx, p2dy); |
| ctx.stroke(); |
| this._resetPaint(ctx); |
| } |
| |
| _drawPaint(ctx, geom, command) { |
| let scanner = _scanCommand(command); |
| let paint = scanner.scanPaint(); |
| this._applyPaint(ctx, paint); |
| ctx.beginPath(); |
| |
| // Fill a virtually infinite rect with the color. |
| // |
| // We can't use (0, 0, width, height) because the current transform can |
| // cause it to not fill the entire clip. |
| ctx.fillRect(-10000, -10000, 20000, 20000); |
| this._resetPaint(ctx); |
| } |
| } |
| |
| function _scanCommand(command) { |
| return new CommandScanner(command); |
| } |
| |
| const PaintingStyle = { |
| fill: 0, |
| stroke: 1, |
| }; |
| |
| /// A singleton used to parse serialized commands. |
| class CommandScanner { |
| constructor(command) { |
| // Skip the first element, which is always the command ID. |
| this.index = 1; |
| this.command = command; |
| } |
| |
| scanRect() { |
| let rect = this.command[this.index++]; |
| return new Rect(rect[0], rect[1], rect[2], rect[3]); |
| } |
| |
| scanRRect() { |
| let rrect = this.command[this.index++]; |
| return new RRect( |
| rrect[0], rrect[1], rrect[2], rrect[3], rrect[4], rrect[5], rrect[6], |
| rrect[7], rrect[8], rrect[9], rrect[10], rrect[11]); |
| } |
| |
| scanPaint() { |
| let paint = this.command[this.index++]; |
| return new Paint( |
| paint[0], paint[1], paint[2], paint[3], paint[4], paint[5], paint[6], |
| paint[7], paint[8], paint[9]); |
| } |
| |
| scanNumber() { |
| return this.command[this.index++]; |
| } |
| |
| scanString() { |
| return this.command[this.index++]; |
| } |
| |
| scanBool() { |
| return this.command[this.index++]; |
| } |
| |
| scanPath() { |
| let subpaths = this.command[this.index++]; |
| return new Path(subpaths); |
| } |
| |
| scanArray() { |
| return this.command[this.index++]; |
| } |
| } |
| |
| class Rect { |
| constructor(left, top, right, bottom) { |
| this.left = left; |
| this.top = top; |
| this.right = right; |
| this.bottom = bottom; |
| } |
| |
| width() { |
| return this.right - this.left; |
| } |
| |
| height() { |
| return this.bottom - this.top; |
| } |
| } |
| |
| class RRect { |
| constructor( |
| left, top, right, bottom, tlRadiusX, tlRadiusY, trRadiusX, trRadiusY, |
| brRadiusX, brRadiusY, blRadiusX, blRadiusY) { |
| this.left = left; |
| this.top = top; |
| this.right = right; |
| this.bottom = bottom; |
| this.tlRadiusX = tlRadiusX; |
| this.tlRadiusY = tlRadiusY; |
| this.trRadiusX = trRadiusX; |
| this.trRadiusY = trRadiusY; |
| this.brRadiusX = brRadiusX; |
| this.brRadiusY = brRadiusY; |
| this.blRadiusX = blRadiusX; |
| this.blRadiusY = blRadiusY; |
| } |
| |
| tallMiddleRect() { |
| let leftRadius = Math.max(this.blRadiusX, this.tlRadiusX); |
| let rightRadius = Math.max(this.trRadiusX, this.brRadiusX); |
| return new Rect( |
| this.left + leftRadius, this.top, this.right - rightRadius, |
| this.bottom); |
| } |
| |
| middleRect() { |
| let leftRadius = Math.max(this.blRadiusX, this.tlRadiusX); |
| let topRadius = Math.max(this.tlRadiusY, this.trRadiusY); |
| let rightRadius = Math.max(this.trRadiusX, this.brRadiusX); |
| let bottomRadius = Math.max(this.brRadiusY, this.blRadiusY); |
| return new Rect( |
| this.left + leftRadius, this.top + topRadius, this.right - rightRadius, |
| this.bottom - bottomRadius); |
| } |
| |
| wideMiddleRect() { |
| let topRadius = Math.max(this.tlRadiusY, this.trRadiusY); |
| let bottomRadius = Math.max(this.brRadiusY, this.blRadiusY); |
| return new Rect( |
| this.left, this.top + topRadius, this.right, |
| this.bottom - bottomRadius); |
| } |
| } |
| |
| class Paint { |
| constructor( |
| blendMode, style, strokeWidth, strokeCap, isAntialias, color, shader, |
| maskFilter, filterQuality, colorFilter) { |
| this.blendMode = blendMode; |
| this.style = style; |
| this.strokeWidth = strokeWidth; |
| this.strokeCap = strokeCap; |
| this.isAntialias = isAntialias; |
| this.color = color; |
| this.shader = _deserializeShader(shader); // TODO: deserialize |
| this.maskFilter = maskFilter; |
| this.filterQuality = filterQuality; |
| this.colorFilter = colorFilter; // TODO: deserialize |
| } |
| } |
| |
| function _deserializeShader(data) { |
| if (!data) { |
| return null; |
| } |
| |
| switch (data[0]) { |
| case 1: |
| return new GradientLinear(data); |
| default: |
| throw new Error(`Shader type not supported: ${data}`); |
| } |
| } |
| |
| class GradientLinear { |
| constructor(data) { |
| this.fromX = data[1]; |
| this.fromY = data[2]; |
| this.toX = data[3]; |
| this.toY = data[4]; |
| this.colors = data[5]; |
| this.colorStops = data[6]; |
| this.tileMode = data[7]; |
| } |
| |
| createPaintStyle(ctx) { |
| let gradient = |
| ctx.createLinearGradient(this.fromX, this.fromY, this.toX, this.toY); |
| if (this.colorStops == null) { |
| gradient.addColorStop(0, this.colors[0]); |
| gradient.addColorStop(1, this.colors[1]); |
| return gradient; |
| } |
| for (let i = 0; i < this.colors.length; i++) { |
| gradient.addColorStop(this.colorStops[i], this.colors[i]); |
| } |
| return gradient; |
| } |
| } |
| |
| const BlendMode = { |
| clear: 0, |
| src: 1, |
| dst: 2, |
| srcOver: 3, |
| dstOver: 4, |
| srcIn: 5, |
| dstIn: 6, |
| srcOut: 7, |
| dstOut: 8, |
| srcATop: 9, |
| dstATop: 10, |
| xor: 11, |
| plus: 12, |
| modulate: 13, |
| screen: 14, |
| overlay: 15, |
| darken: 16, |
| lighten: 17, |
| colorDodge: 18, |
| colorBurn: 19, |
| hardLight: 20, |
| softLight: 21, |
| difference: 22, |
| exclusion: 23, |
| multiply: 24, |
| hue: 25, |
| saturation: 26, |
| color: 27, |
| luminosity: 28, |
| }; |
| |
| function _stringForBlendMode(blendMode) { |
| if (blendMode == null) return null; |
| switch (blendMode) { |
| case BlendMode.srcOver: |
| return 'source-over'; |
| case BlendMode.srcIn: |
| return 'source-in'; |
| case BlendMode.srcOut: |
| return 'source-out'; |
| case BlendMode.srcATop: |
| return 'source-atop'; |
| case BlendMode.dstOver: |
| return 'destination-over'; |
| case BlendMode.dstIn: |
| return 'destination-in'; |
| case BlendMode.dstOut: |
| return 'destination-out'; |
| case BlendMode.dstATop: |
| return 'destination-atop'; |
| case BlendMode.plus: |
| return 'lighten'; |
| case BlendMode.src: |
| return 'copy'; |
| case BlendMode.xor: |
| return 'xor'; |
| case BlendMode.multiply: |
| // Falling back to multiply, ignoring alpha channel. |
| // TODO(flutter_web): only used for debug, find better fallback for web. |
| case BlendMode.modulate: |
| return 'multiply'; |
| case BlendMode.screen: |
| return 'screen'; |
| case BlendMode.overlay: |
| return 'overlay'; |
| case BlendMode.darken: |
| return 'darken'; |
| case BlendMode.lighten: |
| return 'lighten'; |
| case BlendMode.colorDodge: |
| return 'color-dodge'; |
| case BlendMode.colorBurn: |
| return 'color-burn'; |
| case BlendMode.hardLight: |
| return 'hard-light'; |
| case BlendMode.softLight: |
| return 'soft-light'; |
| case BlendMode.difference: |
| return 'difference'; |
| case BlendMode.exclusion: |
| return 'exclusion'; |
| case BlendMode.hue: |
| return 'hue'; |
| case BlendMode.saturation: |
| return 'saturation'; |
| case BlendMode.color: |
| return 'color'; |
| case BlendMode.luminosity: |
| return 'luminosity'; |
| default: |
| throw new Error( |
| 'Flutter web does not support the blend mode: $blendMode'); |
| } |
| } |
| |
| const StrokeCap = { |
| butt: 0, |
| round: 1, |
| square: 2, |
| }; |
| |
| function _stringForStrokeCap(strokeCap) { |
| if (strokeCap == null) return null; |
| switch (strokeCap) { |
| case StrokeCap.butt: |
| return 'butt'; |
| case StrokeCap.round: |
| return 'round'; |
| case StrokeCap.square: |
| default: |
| return 'square'; |
| } |
| } |
| |
| class Path { |
| constructor(serializedSubpaths) { |
| this.subpaths = []; |
| for (let i = 0; i < serializedSubpaths.length; i++) { |
| let subpath = serializedSubpaths[i]; |
| let pathCommands = []; |
| for (let j = 0; j < subpath.length; j++) { |
| let pathCommand = subpath[j]; |
| switch (pathCommand[0]) { |
| case 1: |
| pathCommands.push(new MoveTo(pathCommand)); |
| break; |
| case 2: |
| pathCommands.push(new LineTo(pathCommand)); |
| break; |
| case 3: |
| pathCommands.push(new Ellipse(pathCommand)); |
| break; |
| case 4: |
| pathCommands.push(new QuadraticCurveTo(pathCommand)); |
| break; |
| case 5: |
| pathCommands.push(new BezierCurveTo(pathCommand)); |
| break; |
| case 6: |
| pathCommands.push(new RectCommand(pathCommand)); |
| break; |
| case 7: |
| pathCommands.push(new RRectCommand(pathCommand)); |
| break; |
| case 8: |
| pathCommands.push(new CloseCommand()); |
| break; |
| default: |
| throw new Error(`Unsupported path command: ${pathCommand}`); |
| } |
| } |
| |
| this.subpaths.push(new Subpath(pathCommands)); |
| } |
| } |
| } |
| |
| class Subpath { |
| constructor(commands) { |
| this.commands = commands; |
| } |
| } |
| |
| class MoveTo { |
| constructor(data) { |
| this.x = data[1]; |
| this.y = data[2]; |
| } |
| |
| type() { |
| return PathCommandType.moveTo; |
| } |
| } |
| |
| class LineTo { |
| constructor(data) { |
| this.x = data[1]; |
| this.y = data[2]; |
| } |
| |
| type() { |
| return PathCommandType.lineTo; |
| } |
| } |
| |
| class Ellipse { |
| constructor(data) { |
| this.x = data[1]; |
| this.y = data[2]; |
| this.radiusX = data[3]; |
| this.radiusY = data[4]; |
| this.rotation = data[5]; |
| this.startAngle = data[6]; |
| this.endAngle = data[7]; |
| this.anticlockwise = data[8]; |
| } |
| |
| type() { |
| return PathCommandType.ellipse; |
| } |
| } |
| |
| class QuadraticCurveTo { |
| constructor(data) { |
| this.x1 = data[1]; |
| this.y1 = data[2]; |
| this.x2 = data[3]; |
| this.y2 = data[4]; |
| } |
| |
| type() { |
| return PathCommandType.quadraticCurveTo; |
| } |
| } |
| |
| class BezierCurveTo { |
| constructor(data) { |
| this.x1 = data[1]; |
| this.y1 = data[2]; |
| this.x2 = data[3]; |
| this.y2 = data[4]; |
| this.x3 = data[5]; |
| this.y3 = data[6]; |
| } |
| |
| type() { |
| return PathCommandType.bezierCurveTo; |
| } |
| } |
| |
| class RectCommand { |
| constructor(data) { |
| this.x = data[1]; |
| this.y = data[2]; |
| this.width = data[3]; |
| this.height = data[4]; |
| } |
| |
| type() { |
| return PathCommandType.rect; |
| } |
| } |
| |
| class RRectCommand { |
| constructor(data) { |
| let scanner = _scanCommand(data); |
| this.rrect = scanner.scanRRect(); |
| } |
| |
| type() { |
| return PathCommandType.rrect; |
| } |
| } |
| |
| class CloseCommand { |
| type() { |
| return PathCommandType.close; |
| } |
| } |
| |
| class CanvasShadow { |
| constructor(offsetX, offsetY, blur, spread, color) { |
| this.offsetX = offsetX; |
| this.offsetY = offsetY; |
| this.blur = blur; |
| this.spread = spread; |
| this.color = color; |
| } |
| } |
| |
| const _noShadows = []; |
| |
| function _computeShadowsForElevation(elevation, color) { |
| if (elevation <= 0.0) { |
| return _noShadows; |
| } else if (elevation <= 1.0) { |
| return _computeShadowElevation(2, color); |
| } else if (elevation <= 2.0) { |
| return _computeShadowElevation(4, color); |
| } else if (elevation <= 3.0) { |
| return _computeShadowElevation(6, color); |
| } else if (elevation <= 4.0) { |
| return _computeShadowElevation(8, color); |
| } else if (elevation <= 5.0) { |
| return _computeShadowElevation(16, color); |
| } else { |
| return _computeShadowElevation(24, color); |
| } |
| } |
| |
| function _computeShadowElevation(dp, color) { |
| // TODO(yjbanov): multiple shadows are very expensive. Find a more efficient |
| // method to render them. |
| let red = color[1]; |
| let green = color[2]; |
| let blue = color[3]; |
| |
| // let penumbraColor = `rgba(${red}, ${green}, ${blue}, 0.14)`; |
| // let ambientShadowColor = `rgba(${red}, ${green}, ${blue}, 0.12)`; |
| let umbraColor = `rgba(${red}, ${green}, ${blue}, 0.2)`; |
| |
| let result = []; |
| if (dp === 2) { |
| // result.push(new CanvasShadow(0.0, 2.0, 1.0, 0.0, penumbraColor)); |
| // result.push(new CanvasShadow(0.0, 3.0, 0.5, -2.0, ambientShadowColor)); |
| result.push(new CanvasShadow(0.0, 1.0, 2.5, 0.0, umbraColor)); |
| } else if (dp === 3) { |
| // result.push(new CanvasShadow(0.0, 1.5, 4.0, 0.0, penumbraColor)); |
| // result.push(new CanvasShadow(0.0, 3.0, 1.5, -2.0, ambientShadowColor)); |
| result.push(new CanvasShadow(0.0, 1.0, 4.0, 0.0, umbraColor)); |
| } else if (dp === 4) { |
| // result.push(new CanvasShadow(0.0, 4.0, 2.5, 0.0, penumbraColor)); |
| // result.push(new CanvasShadow(0.0, 1.0, 5.0, 0.0, ambientShadowColor)); |
| result.push(new CanvasShadow(0.0, 2.0, 2.0, -1.0, umbraColor)); |
| } else if (dp === 6) { |
| // result.push(new CanvasShadow(0.0, 6.0, 5.0, 0.0, penumbraColor)); |
| // result.push(new CanvasShadow(0.0, 1.0, 9.0, 0.0, ambientShadowColor)); |
| result.push(new CanvasShadow(0.0, 3.0, 2.5, -1.0, umbraColor)); |
| } else if (dp === 8) { |
| // result.push(new CanvasShadow(0.0, 4.0, 10.0, 1.0, penumbraColor)); |
| // result.push(new CanvasShadow(0.0, 3.0, 7.0, 2.0, ambientShadowColor)); |
| result.push(new CanvasShadow(0.0, 5.0, 2.5, -3.0, umbraColor)); |
| } else if (dp === 12) { |
| // result.push(new CanvasShadow(0.0, 12.0, 8.5, 2.0, penumbraColor)); |
| // result.push(new CanvasShadow(0.0, 5.0, 11.0, 4.0, ambientShadowColor)); |
| result.push(new CanvasShadow(0.0, 7.0, 4.0, -4.0, umbraColor)); |
| } else if (dp === 16) { |
| // result.push(new CanvasShadow(0.0, 16.0, 12.0, 2.0, penumbraColor)); |
| // result.push(new CanvasShadow(0.0, 6.0, 15.0, 5.0, ambientShadowColor)); |
| result.push(new CanvasShadow(0.0, 0.0, 5.0, -5.0, umbraColor)); |
| } else { |
| // result.push(new CanvasShadow(0.0, 24.0, 18.0, 3.0, penumbraColor)); |
| // result.push(new CanvasShadow(0.0, 9.0, 23.0, 8.0, ambientShadowColor)); |
| result.push(new CanvasShadow(0.0, 11.0, 7.5, -7.0, umbraColor)); |
| } |
| return result; |
| } |
| |
| const PathCommandType = { |
| moveTo: 0, |
| lineTo: 1, |
| ellipse: 2, |
| close: 3, |
| quadraticCurveTo: 4, |
| bezierCurveTo: 5, |
| rect: 6, |
| rrect: 7, |
| }; |
| |
| const TileMode = { |
| clamp: 0, |
| repeated: 1, |
| }; |
| |
| const BlurStyle = { |
| normal: 0, |
| solid: 1, |
| outer: 2, |
| inner: 3, |
| }; |
| |
| /// This makes the painter available as "background-image: paint(flt)". |
| registerPaint('flt', FlutterPainter); |
