152 lines
3.6 KiB
JavaScript
152 lines
3.6 KiB
JavaScript
|
|
|
|
/* global variables */
|
|
|
|
var fill = "#c7cee0";
|
|
var stroke = "#112761";
|
|
var strokeWidth = 0.7;
|
|
var shape = "circle"; // shield,circle
|
|
var icon = "dasense/page/default_developer/icons/red_dark/xhdpi/ic_action_achievement.png";
|
|
|
|
var iconX = 19;
|
|
var iconY = 20;
|
|
|
|
|
|
/* jQuery on document ready */
|
|
|
|
$(document).ready(function() {
|
|
|
|
$("input[name=background-color]").val(fill);
|
|
$("input[name=stroke-color]").val(stroke);
|
|
$("input[name=stroke-width]").val(strokeWidth);
|
|
$("input[name=file-url]").val(icon);
|
|
$("input[name=iconx]").val(iconX);
|
|
$("input[name=icony]").val(iconY);
|
|
$("input[name=shape]").filter("[value="+shape+"]").attr('checked', true);
|
|
|
|
drawBadge();
|
|
|
|
$("form input").change(function() {
|
|
updateValues();
|
|
drawBadge();
|
|
});
|
|
|
|
$("form .btn-submit").click(function() {
|
|
updateValues();
|
|
drawBadge();
|
|
});
|
|
|
|
});
|
|
|
|
function updateValues() {
|
|
fill = $("input[name=background-color]").val();
|
|
stroke = $("input[name=stroke-color]").val();
|
|
strokeWidth = $("input[name=stroke-width]").val();
|
|
shape = $("input[name=shape]:checked").val();
|
|
icon = $("input[name=file-url]").val();
|
|
iconX = $("input[name=iconx]").val();
|
|
iconY = $("input[name=icony]").val();
|
|
}
|
|
|
|
function drawBadge() {
|
|
var c = $("#badge")[0];
|
|
var ctx = c.getContext("2d");
|
|
|
|
if(shape == 'shield') {
|
|
//iconY = 30;
|
|
//iconY = parseInt(iconY) + 10;
|
|
drawShield(ctx);
|
|
}
|
|
else if (shape == 'circle') {
|
|
//iconY = 20;
|
|
//iconY = parseInt(iconY) - 10;
|
|
strokeWidth *= 12;
|
|
drawCircle(ctx);
|
|
strokeWidth /= 12;
|
|
}
|
|
|
|
$("input[name=iconx]").val(iconX);
|
|
$("input[name=icony]").val(iconY);
|
|
|
|
var img = new Image();
|
|
img.onload = function() {
|
|
ctx.drawImage(img, iconX, iconY);
|
|
onFinish();
|
|
}
|
|
img.src = icon;
|
|
}
|
|
|
|
function onFinish() {
|
|
var c = $("#badge")[0];
|
|
var ctx = c.getContext("2d");
|
|
ctx.restore();
|
|
ctx.restore();
|
|
ctx.save();
|
|
$("a.btn-submit").attr('href', c.toDataURL());
|
|
}
|
|
|
|
function drawShield(ctx) {
|
|
ctx.canvas.height = 120;
|
|
ctx.canvas.width = 105;
|
|
clearCanvas(ctx);
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.moveTo(0,0);
|
|
ctx.lineTo(543,0);
|
|
ctx.lineTo(543,623);
|
|
ctx.lineTo(0,623);
|
|
ctx.closePath();
|
|
ctx.clip();
|
|
ctx.translate(0,-5);
|
|
ctx.scale(12,12);
|
|
ctx.save();
|
|
ctx.fillStyle = fill;
|
|
ctx.beginPath();
|
|
ctx.moveTo(4.25,1.34);
|
|
//ctx.bezierCurveTo(2.9985,1.7142367,1.747,2.0902233,0.4955,2.46621);
|
|
//ctx.bezierCurveTo(0.58758835,5.2587502,1.2884488,8.6654921,4.25,9.66175);
|
|
//ctx.bezierCurveTo(7.2442172,8.6940151,7.8773651,5.2291438,8.0045,2.46621);
|
|
//ctx.bezierCurveTo(6.753,2.0902233,5.5015,1.7142367,4.25,1.33825);
|
|
ctx.bezierCurveTo(3,1.7,1.75,2,0.5,2.5);
|
|
ctx.bezierCurveTo(0.6,5.26,1.29,8.67,4.25,9.66);
|
|
ctx.bezierCurveTo(7.24,8.69,7.88,5.23,8,2.47);
|
|
ctx.bezierCurveTo(6.75,2,5.5,1.71,4.25,1.34);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
ctx.strokeStyle = stroke;
|
|
ctx.lineWidth = strokeWidth;
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
ctx.restore();
|
|
}
|
|
|
|
function drawCircle(ctx) {
|
|
ctx.canvas.height = 100;
|
|
clearCanvas(ctx);
|
|
ctx.save();
|
|
//ctx.translate(20,0);
|
|
ctx.beginPath();
|
|
ctx.arc(50,50,40,0,2*Math.PI);
|
|
ctx.fillStyle = fill;
|
|
ctx.fill();
|
|
ctx.strokeStyle = stroke;
|
|
ctx.lineWidth = strokeWidth;
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
ctx.restore();
|
|
}
|
|
|
|
function clearCanvas(ctx) {
|
|
var c = $("#badge")[0];
|
|
// Store the current transformation matrix
|
|
ctx.save();
|
|
|
|
// Use the identity matrix while clearing the canvas
|
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
ctx.clearRect(0, 0, c.width, c.height);
|
|
|
|
// Restore the transform
|
|
ctx.restore();
|
|
}
|
|
|