vue canvasパネルを作成して画像と文字を作成し、文字の自動改行をサポートする
35145 ワード
canvasドキュメント:https://www.runoob.com/jsref/dom-obj-canvas.html
グラフィックボード、画像、文字、自動改行を作成するのは別々の方法で、中に2つの小さなdemoが入っていることを柔軟に呼び出すことができます.プレゼンテーションの呼び出し方法は簡単に変更してもvueに頼る必要はありません.
グラフィックボード、画像、文字、自動改行を作成するのは別々の方法で、中に2つの小さなdemoが入っていることを柔軟に呼び出すことができます.プレゼンテーションの呼び出し方法は簡単に変更してもvueに頼る必要はありません.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
img {
width: 100%;
height: 100%;
}
</style>
<body style="background-color: blue">
<div id="app">
<!-- -->
<canvas style="display: none" id="myCanvas" width=""></canvas>
<!-- -->
<img :src="img_src" alt="">
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
let v = new Vue({
el: '#app',
data: {
img_src: '',
ctx: '',
myCanvas: '',
},
methods: {
makePlan() { // demo1
let row = 15; // 400 100
this.makeCanvas(400, 500 + 20 * row); // 400 100+20*
//
this.makeText(' ', 200, 40, 'center', '#000', '20px Arial')
this.makeLine(20, 60, 380, 60);
this.makeText(' ', 100, 100, 'center', '#000', '16px Arial')
this.makeText(' ', 300, 100, 'center', '#000', '16px Arial')
let i = 0;
for (i = 0; i < row; i++) {
this.makeText('2020-02-13-2020-03-13', 100, 120 + 20 * i, 'center')
this.makeText('90 ', 300, 120 + 20 * i, 'center')
}
this.makeLine(20, 120 + 20 * i, 380, 120 + 20 * i);
let img = 'https://csdnimg.cn/public/common/toolbar/images/eduwxfix.png'
this.makeImage(img, 20, 400, 360); //
this.imagePut();
},
makeFloat(text) { // demo2
//
this.makeCanvas(400, 10000);
let y = this.autoRow(text, 20, 0, 360, 20, '16px Arial') //
this.makeCanvas(400, 500 + y); // 400 100+20*
//
this.makeText(' ', 200, 40, 'center', '#000', '20px Arial')
this.makeLine(20, 60, 380, 60);
y = this.autoRow(text, 20, 90, 360, 20, '16px Arial')
this.makeLine(20, 20 + y, 380, 20 + y);
this.imagePut();
},
makeImage(url, x, y, width) {
let image = new Image();
image.setAttribute('crossOrigin', 'anonymous')
image.src = url;
image.onload = () => {
this.ctx.drawImage(image, x, y, width, image.height * width / image.height);
}
},
imagePut(type) { //
// ， ， ，
let i = 0;
let t = setInterval(() => {
i++;
this.img_src = this.ctx.canvas.toDataURL(type);
if (i > 100) {
clearInterval(t)
}
}, 100);
},
makeCanvas(width, height) { //
this.myCanvas = document.getElementById('myCanvas'); // id
this.myCanvas.width = width; //
this.myCanvas.height = height;
this.ctx = this.myCanvas.getContext('2d');
this.ctx.fillStyle = '#ffffff';
this.ctx.fillStyle = '#fff';
this.ctx.fillRect(0, 0, this.myCanvas.width, this.myCanvas.height);
},
makeText(text, x, y, align, color, font) { //
this.ctx.font = !font ? '14px Arial' : font;
this.ctx.fillStyle = !color ? '#4a4a4a' : color;
this.ctx.textAlign = !align ? 'left' : align;
this.ctx.fillText(text, x, y);
},
makeLine(start_x, start_y, end_x, end_y, cap,) { //
this.ctx.beginPath();
this.ctx.lineCap = !cap ? "round" : cap;
this.ctx.moveTo(start_x, start_y);
this.ctx.lineTo(end_x, end_y);
this.ctx.stroke();
},
/**
*
* @param text
* @param x
* @param y
* @param maxWidth
* @param lineHeight
*/
autoRow(text, x, y, maxWidth, lineHeight, font) {
let arrText = text.split('');
let line = '';
this.ctx.font = !font ? '14px Arial' : font;
for (let n = 0; n < arrText.length; n++) {
let testLine = line + arrText[n];
let metrics = this.ctx.measureText(testLine);
let testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
this.makeText(line, x, y)
line = arrText[n];
y += lineHeight;
} else {
line = testLine;
}
}
this.makeText(line, x, y);
return y;
}
},
created() {
this.makePlan('');
}
})
</script>