TypeScript tinycolor2.default函数代码示例

export default (element, { Style }) => {
  if (element.style.color) {
    const color = tinycolor(element.style.color).toHexString();
    // eslint-disable-next-line new-cap
    return Style(`PUB_COLOR_${color}`);
  }
  if (element.style.fontSize) {
    const { fontSize } = element.style;
    // eslint-disable-next-line new-cap
    return Style(`PUB_FONT_SIZE_${fontSize}`);
  }
  return null;
};

export function blendColor(fgColor: string, bgColor: string, alpha: number) {
    const fg = tinycolor(fgColor).toRgb();
    var added = [fg.r, fg.g, fg.b, alpha];

    const bg = tinycolor(bgColor).toRgb();
    var base = [bg.r, bg.g, bg.b, 1 - alpha];

    var mix = [];

    mix[3] = 1 - (1 - added[3]) * (1 - base[3]); // alpha

    mix[0] = Math.round(
        (added[0] * added[3]) / mix[3] + (base[0] * base[3] * (1 - added[3])) / mix[3]
    ); // red

    mix[1] = Math.round(
        (added[1] * added[3]) / mix[3] + (base[1] * base[3] * (1 - added[3])) / mix[3]
    ); // green

    mix[2] = Math.round(
        (added[2] * added[3]) / mix[3] + (base[2] * base[3] * (1 - added[3])) / mix[3]
    ); // blue

    return "rgba(" + mix.join(",") + ")";
}

 onThresholdTypeChange(index) {
   // Because of the ng-model binding, threshold's color mode is already set here
   if (this.panel.thresholds[index].colorMode === 'custom') {
     this.panel.thresholds[index].fillColor = tinycolor(config.theme.colors.blueBase)
       .setAlpha(0.2)
       .toRgbString();
     this.panel.thresholds[index].lineColor = tinycolor(config.theme.colors.blueShade)
       .setAlpha(0.6)
       .toRgbString();
   }
   this.panelCtrl.render();
 }

function addAlphaToRGB(colorString: string, alpha: number): string {
  let color = tinycolor(colorString);
  if (color.isValid()) {
    color.setAlpha(alpha);
    return color.toRgbString();
  } else {
    return colorString;
  }
}

  state.round.roundRankedPlayers.forEach((player, roundPos) => {

    // TODO: this lookup sucks, combine with above memoization to map a map of {id => pos} or
    // something
    const matchPos = matchRankedPlayers.findIndex((matchPlayer) => matchPlayer.id === player.id);

    const roundRowY = y + 30 + roundPos * 12;
    const matchRowY = y + 30 + matchPos * 12;

    let rowY, pos;
    if (elapsedMs < endCountingMs) {
      pos = player.scored ? roundPos + 1 : '';
      rowY = roundRowY;
    } else if (elapsedMs > endSortingMs) {
      pos = matchPos + 1;
      rowY = matchRowY;
    } else {
      pos = matchPos + 1;

      const sortingElapsedMs = elapsedMs - endCountingMs;
      const progress = sortingElapsedMs / (endSortingMs - endCountingMs);
      rowY = roundRowY + ((matchRowY - roundRowY) * progress)
    }

    const strokes = player.scored ? `${player.strokes}` : '---';
    const elapsed = player.scored ? (player.scoreTime / 1000).toFixed(2) : '---';

    // Render place
    ctx.textAlign = 'left';
    ctx.fillText(pos, placeX, rowY);

    // Render name
    if (tinycolor(player.color).isDark()) {
      ctx.strokeText(player.name, nameX, rowY);
    }

    ctx.fillStyle = player.color;
    ctx.fillText(player.name, nameX, rowY);

    // Render strokes & time elapsed
    ctx.textAlign = 'right';
    ctx.fillStyle = 'white';

    ctx.fillText(strokes, scoreX, rowY);
    ctx.fillText(elapsed, timeX, rowY);

    // Render points
    renderLeaderboardPoints(ctx, state, player, pointsX, rowY, elapsedMs);
  });

  state.round.roundRankedPlayers.forEach((player, idx) => {
    const rowY = y + 30 + idx * 10;

    ctx.textAlign = 'left';
    ctx.fillText(`${idx + 1}`, placeX, rowY);
    ctx.fillStyle = player.color;

    if (tinycolor(player.color).isDark()) {
      ctx.strokeText(player.name, nameX, rowY);
    }

    ctx.fillText(player.name, nameX, rowY);

    ctx.textAlign = 'right';
    ctx.fillStyle = 'white';
    ctx.fillText(`${player.strokes}`, scoreX, rowY);
    const elapsed = (player.scoreTime / 1000).toFixed(2);
    ctx.fillText(elapsed, timeX, rowY);
  });

export function renderMessages(ctx: CanvasRenderingContext2D, state: State, scaleFactor: number) {
  // Messages
  if (state.displayMessage) {
    ctx.fillStyle = textColor;
    ctx.font = 'normal 8px "Press Start 2P"';
    ctx.textAlign = 'left';

    const colorStart = state.displayMessage.indexOf('{{');
    const colorEnd = state.displayMessage.indexOf('}}');

    const x = 10;
    const y = Math.round(HEIGHT - (55 / scaleFactor));

    if (colorStart !== -1) {
      const before = state.displayMessage.slice(0, colorStart);
      const colorized = state.displayMessage.slice(colorStart + 2, colorEnd);
      const after = state.displayMessage.slice(colorEnd + 2);

      ctx.fillStyle = textColor;
      ctx.fillText(before, x, y);

      ctx.fillStyle = state.displayMessageColor;

      if (tinycolor(state.displayMessageColor).isDark()) {
        ctx.strokeText(colorized, x + ctx.measureText(before).width, y);
      }

      ctx.fillText(colorized, x + ctx.measureText(before).width, y);

      ctx.fillStyle = textColor;
      ctx.fillText(after, x + ctx.measureText(before + colorized).width, y);

    } else {
      ctx.fillText(state.displayMessage, x, y);
    }
  }
}

export function hslToHex(color) {
  return tinycolor(color).toHexString();
}

export function hexToHsl(color) {
  return tinycolor(color).toHsl();
}

export function darken(color: string, percent: number) {
    return tinyColor(color).darken(percent).toHexString();
}