LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Closes #132

Browse source
This commit is contained in:
ポール ウェッブ 2018-09-28 16:59:38 -05:00
parent 7654917466
commit 43db987a7e
3 changed files with 22 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
app/components/client/tour-scripts.js
View file

@ -337,8 +337,8 @@ const handleExamples = debounce(event => {
function initCanvas() { // eslint-disable-line function initCanvas() { // eslint-disable-line
const canvas = document.getElementById("meme-canvas"); const canvas = document.getElementById("meme-canvas");
const canvasHeight = 300; const canvasHeight = 600;
const canvasWidth = 400; const canvasWidth = 800;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const img = document.getElementById("base-image"); const img = document.getElementById("base-image");
@ -346,37 +346,41 @@ function initCanvas() { // eslint-disable-line
ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
ctx.fillStyle = "white"; ctx.fillStyle = "white";
ctx.font = "bold 28px Karla"; ctx.font = "bold 56px Karla";
ctx.lineJoin = "round"; ctx.lineJoin = "round";
ctx.lineWidth = 4; ctx.lineWidth = 4;
ctx.strokeStyle = "black"; ctx.strokeStyle = "black";
ctx.textAlign = "center"; ctx.textAlign = "center";
ctx.textBaseline = "top"; ctx.textBaseline = "top";
ctx.strokeText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20); positionCanvasText(ctx, canvasHeight, canvasWidth);
ctx.fillText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20); }
ctx.strokeText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40)); function positionCanvasText(canvas, height, width) {
ctx.fillText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40)); canvas.strokeText(document.getElementById("meme-top-line").value.toUpperCase(), width / 2, 40);
canvas.fillText(document.getElementById("meme-top-line").value.toUpperCase(), width / 2, 40);
canvas.strokeText(document.getElementById("meme-bottom-line").value.toUpperCase(), width / 2, (height - 80));
canvas.fillText(document.getElementById("meme-bottom-line").value.toUpperCase(), width / 2, (height - 80));
} }
function updateCanvas(imageSource) { function updateCanvas(imageSource) {
const canvas = document.getElementById("meme-canvas"); const canvas = document.getElementById("meme-canvas");
const canvasHeight = 300; const canvasHeight = 600;
const canvasWidth = 400; const canvasWidth = 800;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const img = document.getElementById("base-image"); const img = document.getElementById("base-image");
clearCanvas(canvas); clearCanvas(canvas);
if (imageSource) { if (imageSource) {
ctx.drawImage(imageSource, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); ctx.drawImage(imageSource, 0, 0, canvasWidth, 600 * imageSource.height / imageSource.width);
// ctx.drawImage(imageSource, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
img.src = imageSource.src; img.src = imageSource.src;
} ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); } else {
ctx.drawImage(imageSource, 0, 0, canvasWidth, 600 * imageSource.height / imageSource.width);
ctx.strokeText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20); // ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
ctx.fillText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20); }
ctx.strokeText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40)); positionCanvasText(ctx, canvasHeight, canvasWidth);
ctx.fillText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
} }

1
app/sass/pages/_tour.scss
View file

@ -193,6 +193,7 @@
canvas { canvas {
width: 100%; height: 100%; width: 100%; height: 100%;
// width: 400px; height: 300px;
background-color: rgba($teal, 0.3); background-color: rgba($teal, 0.3);
margin-bottom: 1rem; margin-bottom: 1rem;

2
app/sockets.js
View file

@ -220,7 +220,7 @@ function generateMemeCreator(socket) {
const memeCreator = html` const memeCreator = html`
<div class="tour__content__meme__canvas"> <div class="tour__content__meme__canvas">
<img alt="Base image for LBRY meme creator" id="base-image" style="height: 0; position: absolute; visibility: hidden;"/> <img alt="Base image for LBRY meme creator" id="base-image" style="height: 0; position: absolute; visibility: hidden;"/>
<canvas id="meme-canvas" height="300" width="400">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas> <canvas id="meme-canvas" height="600" width="800">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas>
${renderedImages} ${renderedImages}
</div> </div>