TypeScript tinycolor2类代码示例

function renderBall(
  ctx: CanvasRenderingContext2D, x: number, y: number, fill: string, stroke: string, playerState?: PlayerState
) {
  // ball border width
  ctx.lineWidth = 1;

  if (playerState && playerState === PlayerState.leftRound) {
    // make fill translucent
    ctx.fillStyle = tinycolor(fill).setAlpha(0.5).toRgbString();
    ctx.strokeStyle = tinycolor(stroke).setAlpha(0.5).toRgbString();
  } else {
    ctx.fillStyle = fill;
    ctx.strokeStyle = stroke;
  }

  ctx.beginPath();
  ctx.arc(x, y, BALL_RADIUS, 0, 2 * Math.PI);
  ctx.fill();
  ctx.closePath();

  ctx.beginPath();
  ctx.arc(x, y, BALL_RADIUS - ctx.lineWidth / 2, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.closePath();
}

export default function(t: number, cols: tinycolorInstance[], hsv?: boolean) {
	var c = cols.length - 1; t = t * c; if (c === 0) return cols[0];
	var i = _.clamp(Math.floor(t), 0, c-1); t = t - i;
	var a = cols[i], b = cols[i+1], lerp = function(s: number, e: number) { return (1-t)*s+t*e; };
	if (hsv) {
		let s = a.toHsv(), e = b.toHsv();
		return tinycolor({h: lerp(s.h, e.h), s: lerp(s.s, e.s), v: lerp(s.v, e.v)});
	} else {
		let s = a.toRgb(), e = b.toRgb();
		return tinycolor({r: lerp(s.r, e.r), g: lerp(s.g, e.g), b: lerp(s.b, e.b)});
	}
};

_.each(cols, function(col) {
	var n = _.camelCase('color-'+col);
	var c = tinycolor(Enums.syncDef[n]);
	loaders[n] = function(v) {
		var col = getColor(v) || c;
		$('#'+n).val(col.toHexString());
		$('#'+n).parent().next().find('div').css('backgroundColor', col.toHexString());
	};
});

export function svgToAndroidColor(color: string): string | undefined {
  if (color === 'none') {
    return undefined;
  }
  const colorInstance = tinycolor(color);
  const colorHex = colorInstance.toHex();
  const alphaHex = colorInstance.toHex8().substr(6);
  return '#' + (alphaHex !== 'ff' ? alphaHex : '') + colorHex;
}

$('#onlineColors input').change(function() {
	var color = getColor($(this).val());
	if (!color) {
		var id = $(this).attr('id');
		color = tinycolor(
			id=='colorNormal'?'00f':
			id=='colorNoob'  ?'0ff':
			id=='colorMod'   ?'0f0':
			id=='colorBanned'?'f00':
			/* colorIgnored */'000');
	}
	$(this).val(color.toHexString());
	$(this).parent().next().find('div').css('backgroundColor', color.toHexString());
});

export function renderMessages(ctx: CanvasRenderingContext2D, state: State, scaleFactor: number) {
  // Messages
  if (state.displayMessage) {
    ctx.fillStyle = textColor;
    ctx.strokeStyle = 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 default _.memoize(function(color: string) {
	var filts = color.split(';'); color = filts.shift();
	var col = /^\s*rand(om)?\s*$/i.exec(color) ? tinycolor.random() : tinycolor(color);
	if (!col.isValid()) return undefined;
	return _.reduce(_.map(filts, function(v) { return _.trim(_.toLower(v)); }), _.cond(
		_.concat([[_.partial(_.eq, _, false), _.constant(false)]],
			_.map(['lighten','brighten','darken','desaturate','saturate','spin'], function(t) {
				return [
					_.rearg(_.partial(_.startsWith, _, t), 1),
					function(c: tinycolorInstance, f: string) {
						var s = t == 'spin', d = s ? 0 : 10, n = _.toNumber(f.substr(t.length) || d);
						return c[t](isNaN(n) ? d : _.clamp(n, s ? -360 : 0, s ? 360 : 100));
					}
				];
			}), [
				[
					function(c: tinycolorInstance, f: string) { return /^gr[ae]y(scale)?$/.exec(f); },
					function(c: tinycolorInstance) { return c.greyscale(); }
				], [_.constant(true), _.constant(false)]
			]
		)
	), col);
}, function(col: string) { return /^\s*rand(om)?\s*(;|$)/i.exec(col) ? _.uniqueId() : '>'+col; });

export function renderHud(ctx: CanvasRenderingContext2D, state: State) {
  ctx.fillStyle = textColor;
  ctx.strokeStyle = textColor;
  ctx.lineWidth = 2;

  ctx.font = 'normal 16px "Press Start 2P"';

  // Stroke count

  if (!state.isObserver) {
    ctx.textAlign = 'left';
    ctx.fillText(`Strokes ${state.round.strokes}`, 10, 20);
  } else {
    ctx.fillText('Spectating', 10, 20);
    ctx.font = 'normal 8px "Press Start 2P"';
    ctx.fillText('Press [shoot] to join', 10, 33);
  }

  ctx.font = 'normal 8px "Press Start 2P"';
  ctx.textAlign = 'right';

  const playerCount = state.players.size;
  ctx.fillText(`${playerCount} players in round`, WIDTH - 10, 11);

  if (!state.isObserver) {
    ctx.fillStyle = textColor;

    ctx.fillText('You are', WIDTH - 10, 26);

    ctx.fillStyle = state.color;
    ctx.fillText(state.name, WIDTH - 10, 35);

    if (tinycolor(state.color).isDark()) {
      ctx.strokeText(state.name, WIDTH - 10, 35);
    }
  }

  ctx.fillStyle = textColor;
  ctx.font = 'normal 16px "Press Start 2P"';

  if (state.gameState === GameState.roundInProgress) {
    // Timer
    const expTime = state.round.expTime;
    const remainingMs = expTime - Date.now();

    if (remainingMs < HURRY_UP_MS) {
      ctx.fillStyle = hurryUpTimerColor;
    }

    let remainingSec = Math.ceil(remainingMs / 1000);

    // prevent seconds from going into negatives (possible due to server lag on levelOver message)
    if (remainingSec < 0) {
      remainingSec = 0;
    }

    ctx.textAlign = 'center';
    ctx.fillText(remainingSec + '', WIDTH / 2, 20);

    // Match Timer
    ctx.fillStyle = textColor;
    ctx.font = 'normal 8px "Press Start 2P"';

    const remainingMatchMs = state.match.matchEndsAt - Date.now();

    if (remainingMatchMs < 0) {
      ctx.fillText('Final hole!!', WIDTH / 2, 30);

    } else {
      const matchMinutes = Math.floor(remainingMatchMs / 1000 / 60);
      const matchSeconds = (Math.floor(remainingMatchMs / 1000) % 60);
      const fmtMinutes = matchMinutes + '';
      const fmtSeconds = matchSeconds < 10 ? '0' + matchSeconds : matchSeconds;

      ctx.fillText(`Match: ${fmtMinutes}:${fmtSeconds}`, WIDTH / 2, 30);
    }

    ctx.font = 'normal 16px "Press Start 2P"';
    ctx.fillStyle = textColor;

    // Show goalText when you score
    if (state.round.scored) {
      ctx.textAlign = 'center';
      ctx.fillText(`${state.round.goalText.toUpperCase()}!!`, WIDTH / 2, HEIGHT / 2);
    }
  }

}

	var cols = _.map(str.split('/'), function(v) { return parseColor(v) || tinycolor('black'); });