本文整理汇总了TypeScript中tinycolor2类的典型用法代码示例。如果您正苦于以下问题：TypeScript tinycolor2类的具体用法？TypeScript tinycolor2怎么用？TypeScript tinycolor2使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。
在下文中一共展示了tinycolor2类的9个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。
示例1: renderBall
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();
}
开发者ID:thomasboyt，项目名称:manygolf，代码行数:25，代码来源:index.ts
示例2: function
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)});
}
};
开发者ID:UnlitStudio，项目名称:PlazaPlus，代码行数:12，代码来源:colorLerp.ts
示例3: function
_.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());
};
});
开发者ID:UnlitStudio，项目名称:PlazaPlus，代码行数:9，代码来源:options.ts
示例4: svgToAndroidColor
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;
}
开发者ID:arpitsaan，项目名称:ShapeShifter，代码行数:9，代码来源:ColorUtil.ts
示例5: getColor
$('#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());
});
开发者ID:UnlitStudio，项目名称:PlazaPlus，代码行数:14，代码来源:options.ts
示例6: renderMessages
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);
}
}
}
开发者ID:thomasboyt，项目名称:manygolf，代码行数:38，代码来源:hud.ts
示例7: tinycolor
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; });
开发者ID:UnlitStudio，项目名称:PlazaPlus，代码行数:23，代码来源:parseColor.ts
示例8: renderHud
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);
}
}
}
开发者ID:thomasboyt，项目名称:manygolf，代码行数:88，代码来源:hud.ts
示例9: function
var cols = _.map(str.split('/'), function(v) { return parseColor(v) || tinycolor('black'); });
开发者ID:UnlitStudio，项目名称:PlazaPlus，代码行数:1，代码来源:parseSeg.ts
注：本文中的tinycolor2类示例整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。 |
客服电话
APP下载
官方微信
请发表评论