Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6018
Star 91
Fork 164
H
hello uni-app x
提交 ac5e5fc5 编写于 作者: 辛宝Otto's avatar 辛宝Otto 🥊
浏览文件
操作

feat: 移除 createCanvasContextAsync 路由

上级 0ad543b0
隐藏空白更改
内联 并排
Showing with 0 addition and 1011 deletion
pages/API/create-canvas-context-async/child-canvas.uvue 已删除 100644 → 0
浏览文件 @ 0ad543b0
<template>
<view>
<canvas class="child-canvas" id="canvas" style="height: 100px;border: 1px solid red;"></canvas>
<view>isCanvasContextNull: {{isCanvasContextNull}}</view>
</view>
</template>
<script>
type getContext = {
ctx : boolean,
hasFillRect : boolean
}
export default {
data() {
return {
isCanvasContextNull : false
}
},
mounted() {
this.$nextTick(() => {
uni.createCanvasContextAsync({
id: 'canvas',
component: this,
success: (res : CanvasContext) => {
const context = res.getContext('2d')!;
this.isCanvasContextNull = true
// 若干绘制调用
// 绘制红色正方形
context.fillStyle = "rgb(200, 0, 0)";
context.fillRect(10, 10, 50, 50);
// 绘制蓝色半透明正方形
context.fillStyle = "rgba(0, 0, 200, 0.5)";
context.fillRect(30, 30, 50, 50);
context.draw();
}
})
})
}
}
</script>
pages/API/create-canvas-context-async/create-canvas-context-async.test.js 已删除 100644 → 0
浏览文件 @ 0ad543b0
const PAGE_PATH = '/pages/API/create-canvas-context-async/create-canvas-context-async'
describe('create-canvas-context-async', () => {
let page
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor('view')
})
it('page canvas', async () => {
await page.waitFor(100)
const data = await page.data()
expect(data.testCreateCanvasContextAsyncSuccess).toBe(true)
})
it('component canvas', async () => {
// child-canvas
await page.waitFor(100)
// const element = await page.$('.node-child-component')
const element = await page.$('child-canvas')
const data = await page.data()
expect(data.isCanvasContextNull).toBe(true)
})
})
pages/API/create-canvas-context-async/create-canvas-context-async.uvue 已删除 100644 → 0
浏览文件 @ 0ad543b0
<template>
<view class="page" id="page-canvas">
<canvas id="canvas" class="canvas-element"></canvas>
<scroll-view class="scroll-view">
<view class="grid-view">
<view class="grid-item" v-for="(name, index) in names" :key="index">
<button class="canvas-drawing-button" @click="handleCanvasButton(name)">{{name}}</button>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
function hidpi(canvas : UniCanvasElement) {
const context = canvas.getContext("2d")!;
const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;
canvas.width = canvas.offsetWidth * dpr;
canvas.height = canvas.offsetHeight * dpr;
context.scale(dpr, dpr);
}
export default {
data() {
const API_PATH = ["arc", "arcTo", "bezierCurveTo", "quadraticCurve", "moveTo", "lineTo", "rect", "clip", "pattern"]
const API_DRAW = ["stroke", "strokeRect", "strokeText", "fill", "fillRect", "fillText", "drawImage", "drawImageLocal", "clearRect"]
const API_STATE = ["beginPath", "closePath", "reset", "transform", "rotate", "resetTransform", "save", "restore", "scale", "translate"]
const API_PROPERTIES = ["setLineCap", "setLineJoin", "setLineWidth", "setMiterLimit", "setFillStyle", "setStrokeStyle", "setGlobalAlpha", "setFontSize", "lineDash", "linearGradient", "radialGradient", "textAlign"]
return {
title: 'Context2D',
names: [...API_PATH, ...API_DRAW, ...API_STATE, ...API_PROPERTIES, "measureText"] as string[],
canvasContext: null as CanvasRenderingContext2D | null,
canvasWidth: 0,
canvasHeight: 0,
image: null as Image | null,
// 仅测试
testCreateCanvasContextAsyncSuccess: false,
testToBlobResult: false,
testToDataURLResult: false
}
},
onReady() {
// 异步调用方式, 跨平台
uni.createCanvasContextAsync({
id: 'canvas',
component: this,
success: (context : CanvasContext) => {
this.canvasContext = context.getContext('2d')!;
hidpi(this.canvasContext!.canvas);
this.canvasWidth = this.canvasContext!.canvas.width;
this.canvasHeight = this.canvasContext!.canvas.height;
// #ifdef WEB
context.toBlob((blob : Blob) => {
this.testToBlobResult = (blob.size > 0 && blob.type == 'image/jpeg')
}, 'image/jpeg', 0.95)
this.testToDataURLResult = context.toDataURL().startsWith('data:image/png;base64')
// #endif
// 仅测试
this.testCreateCanvasContextAsyncSuccess = true
}
})
// 同步调用方式，仅支持 app/web
// let canvas = uni.getElementById("canvas") as UniCanvasElement
// this.canvasContext = canvas.getContext("2d");
// hidpi(canvas);
// this.canvasWidth = this.canvasContext!.canvas.width;
// this.canvasHeight = this.canvasContext!.canvas.height;
},
methods: {
handleCanvasButton(name : string) {
switch (name) {
case "arc":
this.arc();
break;
case "arcTo":
this.arcTo();
break;
case "beginPath":
this.beginPath();
break;
case "bezierCurveTo":
this.bezierCurveTo();
break;
case "clearRect":
this.clearRect();
break;
case "clip":
this.clip();
break;
case "closePath":
this.closePath();
break;
case "pattern":
this.pattern()
break;
case "linearGradient":
this.createLinearGradient();
break;
case "radialGradient":
this.createRadialGradient();
break;
case "fill":
this.fill();
break;
case "fillRect":
this.fillRect();
break;
case "fillText":
this.fillText();
break;
case "lineTo":
this.lineTo();
break;
case "moveTo":
this.moveTo();
break;
case "quadraticCurve":
this.quadraticCurveTo();
break;
case "rect":
this.rect();
break;
case "reset":
this.reset();
break;
case "resetTransform":
this.resetTransform();
break;
case "restore":
this.restore();
break;
case "rotate":
this.rotate();
break;
case "save":
this.save();
break;
case "scale":
this.scale();
break;
case "stroke":
this.stroke();
break;
case "strokeRect":
this.strokeRect();
break;
case "strokeText":
this.strokeText();
break;
case "transform":
this.transform();
break;
case "translate":
this.translate();
break;
case "drawImageLocal":
this.drawImageLocal()
break;
case "drawImage":
this.drawImage();
break;
case "measureText":
this.measureText();
break;
case "setFillStyle":
this.setFillStyle();
break;
case "setStrokeStyle":
this.setStrokeStyle();
break;
case "setGlobalAlpha":
this.setGlobalAlpha();
break;
case "setFontSize":
this.setFontSize();
break;
case "setLineCap":
this.setLineCap();
break;
case "setLineJoin":
this.setLineJoin();
break;
case "lineDash":
this.lineDash();
break;
case "setLineWidth":
this.setLineWidth();
break;
case "setMiterLimit":
this.setMiterLimit();
break;
case "textAlign":
this.textAlign();
default:
break;
}
},
arc() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.beginPath()
context.lineWidth = 2
context.arc(75, 75, 50, 0, Math.PI * 2, true)
context.moveTo(110, 75)
context.arc(75, 75, 35, 0, Math.PI, false)
context.moveTo(65, 65)
context.arc(60, 65, 5, 0, Math.PI * 2, true)
context.moveTo(95, 65)
context.arc(90, 65, 5, 0, Math.PI * 2, true)
context.stroke()
context.restore()
},
arcTo() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.beginPath()
context.moveTo(150, 20)
context.arcTo(150, 100, 50, 20, 30)
context.stroke()
context.fillStyle = "blue"
// base point
context.fillRect(150, 20, 10, 10)
context.fillStyle = "red"
// control point one
context.fillRect(150, 100, 10, 10)
// control point two
context.fillRect(50, 20, 10, 10)
//
context.setLineDash([5, 5])
context.moveTo(150, 20)
context.lineTo(150, 100)
context.lineTo(50, 20)
context.stroke()
context.beginPath()
context.arc(120, 38, 30, 0, 2 * Math.PI, true)
context.stroke()
context.restore()
},
beginPath() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
// First path
context.beginPath()
context.strokeStyle = "blue"
context.moveTo(20, 20)
context.lineTo(200, 20)
context.stroke()
// Second path
context.beginPath()
context.strokeStyle = "green"
context.moveTo(20, 20)
context.lineTo(120, 120)
context.stroke()
context.restore()
},
textAlign() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.beginPath()
context.moveTo(150, 0)
context.lineTo(150, 150)
context.stroke()
context.font = "30px serif"
context.textAlign = "left"
context.fillText("left-aligned", 150, 40)
context.textAlign = "center"
context.fillText("center-aligned", 150, 85)
context.textAlign = "right"
context.fillText("right-aligned", 150, 130)
context.restore()
},
bezierCurveTo() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.beginPath()
context.moveTo(50, 20)
context.bezierCurveTo(230, 30, 150, 60, 50, 100)
context.stroke()
context.fillStyle = "blue"
// start point
context.fillRect(50, 20, 10, 10)
// end point
context.fillRect(50, 100, 10, 10)
context.fillStyle = "red"
// control point one
context.fillRect(230, 30, 10, 10)
// control point two
context.fillRect(150, 70, 10, 10)
context.restore()
},
clearRect() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
// 绘制黄色背景
context.beginPath()
context.fillStyle = "#ff6"
context.fillRect(0, 0, 300, 150)
// 绘制蓝色三角形
context.beginPath()
context.fillStyle = "blue"
context.moveTo(20, 20)
context.lineTo(180, 20)
context.lineTo(130, 130)
context.closePath()
context.fill()
// 清除一部分画布
context.clearRect(10, 10, 120, 100)
context.restore()
},
clip() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
// Create circular clipping region
context.beginPath();
context.arc(100, 75, 50, 0, Math.PI * 2, true)
context.clip()
// Draw stuff that gets clipped
context.fillStyle = "blue"
context.fillRect(0, 0, 300, 150)
context.fillStyle = "orange"
context.fillRect(0, 0, 100, 100)
context.restore()
},
closePath() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.beginPath()
context.lineWidth = 10
context.moveTo(20, 20)
context.lineTo(20, 100)
context.lineTo(70, 100)
context.closePath()
context.stroke()
context.restore()
},
pattern() {
const context = this.canvasContext!
const image = new Image(100, 100)
image.src = '../../../static/api.png';
image.onload = () => {
context.save()
this.clearCanvasRect()
const pattern = context.createPattern(image, "repeat")
context.fillStyle = pattern
context.fillRect(0, 0, 100, 100)
context.restore()
};
},
createLinearGradient() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
// Create a linear gradient
// The start gradient point is at x=20, y=0
// The end gradient point is at x=220, y=0
const gradient = context.createLinearGradient(20, 0, 220, 0)
// Add three color stops
gradient.addColorStop(0, "green")
gradient.addColorStop(0.5, "cyan")
gradient.addColorStop(1, "green")
// Set the fill style and draw a rectangle
context.fillStyle = gradient
context.fillRect(20, 20, 200, 100)
context.restore()
},
createRadialGradient() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
// Create a radial gradient
// The inner circle is at x=110, y=90, with radius=30
// The outer circle is at x=100, y=100, with radius=70
const gradient = context.createRadialGradient(110, 90, 30, 100, 100, 70)
// Add three color stops
gradient.addColorStop(0, "pink")
gradient.addColorStop(0.9, "white")
gradient.addColorStop(1, "green")
// Set the fill style and draw a rectangle
context.fillStyle = gradient
context.fillRect(20, 20, 160, 160)
context.restore()
},
fill() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.beginPath()
context.rect(20, 20, 150, 100)
context.strokeStyle = '#00ff00'
context.fill()
context.restore()
},
fillRect() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.fillStyle = "green"
context.fillRect(20, 10, 150, 100)
context.restore()
},
fillText() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
console.log("fillText")
context.strokeStyle = '#ff0000'
context.beginPath()
context.moveTo(0, 10)
context.lineTo(300, 10)
context.stroke()
// context.save()
// context.scale(1.5, 1.5)
// context.translate(20, 20)
// context.setFontSize(10)
context.fillText('Hello World', 0, 30, 300)
// context.setFontSize(20)
context.fillText('Hello World', 100, 30, 300)
// context.restore()
context.beginPath()
context.moveTo(0, 30)
context.lineTo(300, 30)
context.stroke()
context.restore()
},
moveTo() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.beginPath()
context.moveTo(0, 0)
context.lineTo(300, 150)
context.stroke()
context.restore()
},
lineTo() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.beginPath()
context.moveTo(20, 20)
context.lineTo(20, 100)
context.lineTo(70, 100)
context.stroke()
context.restore()
},
stroke() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.beginPath()
context.moveTo(20, 20)
context.lineTo(20, 100)
context.lineTo(70, 100)
context.strokeStyle = '#00ff00'
context.stroke()
context.restore()
},
strokeRect() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.strokeStyle = "green"
context.strokeRect(20, 10, 160, 100)
context.restore()
},
strokeText() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.font = "10px serif"
context.strokeText("Hello world", 50, 90)
context.font = "30px serif"
context.strokeStyle = "blue"
context.strokeText("Hello world", 50, 100)
context.restore()
},
rotate() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
// Point of transform origin
context.arc(0, 0, 5, 0, 2 * Math.PI, true)
context.fillStyle = "blue"
context.fill()
// Non-rotated rectangle
context.fillStyle = "gray"
context.fillRect(100, 0, 80, 20)
// Rotated rectangle
context.rotate((45 * Math.PI) / 180)
context.fillStyle = "red"
context.fillRect(100, 0, 80, 20)
// Reset transformation matrix to the identity matrix
context.setTransform(1, 0, 0, 1, 0, 0)
context.restore()
},
scale() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
// Scaled rectangle
context.scale(9, 3)
context.fillStyle = "red"
context.fillRect(10, 10, 8, 20)
// Reset current transformation matrix to the identity matrix
context.setTransform(1, 0, 0, 1, 0, 0)
// Non-scaled rectangle
context.fillStyle = "gray"
context.fillRect(10, 10, 8, 20)
context.restore()
},
reset() {
const context = this.canvasContext!
// Set line width
context.lineWidth = 10
context.strokeStyle = '#00ff00'
// Stroke rect outline
context.strokeRect(50, 50, 150, 100)
// Create filled text
context.font = "50px serif";
context.fillText("Rect!", 70, 110)
context.lineWidth = 5
// Stroke out circle
context.beginPath();
context.arc(300, 100, 50, 0, 2 * Math.PI)
context.stroke();
// Create filled text
context.font = "25px sans-serif"
context.fillText("Circle!", 265, 100)
// context.reset()
hidpi(uni.getElementById("canvas") as UniCanvasElement)
},
translate() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
// Moved square
context.translate(110, 30)
context.fillStyle = "red"
context.fillRect(0, 0, 80, 80)
// Reset current transformation matrix to the identity matrix
context.setTransform(1, 0, 0, 1, 0, 0)
// Unmoved square
context.fillStyle = "gray"
context.fillRect(0, 0, 80, 80)
context.restore()
},
save() {
const context = this.canvasContext!
this.clearCanvasRect()
context.save()
context.beginPath()
context.strokeStyle = '#00ff00'
context.scale(2, 2)
context.strokeStyle = '#ff0000'
context.rect(0, 0, 100, 100)
context.stroke()
context.restore()
context.save()
context.rect(0, 0, 50, 50)
context.stroke()
context.restore()
},
restore() {
const context = this.canvasContext!;
this.clearCanvasRect();
[3, 2, 1].forEach((item) => {
context.save()
context.beginPath()
context.scale(item, item)
context.rect(10, 10, 100, 100)
context.stroke()
context.restore()
})
},
drawImageLocal() {
const context = this.canvasContext!
this.clearCanvasRect()
const image = new Image(100, 100)
image.src = '../../../static/uni.png'
image.onload = () => {
context.drawImage(image, 0, 0, 100, 100)
}
},
drawImage() {
const context = this.canvasContext!
this.clearCanvasRect()
const image = new Image(100, 100);
image.src = 'https://web-ext-storage.dcloud.net.cn/uni-app-x/hello-uniappx-qrcode.png'
image.onload = () => {
context.drawImage(image, 0, 0, 100, 100)
}
},
rect() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.beginPath()
context.rect(20, 20, 150, 100)
context.stroke()
context.restore()
},
quadraticCurveTo() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
// Quadratic Bézier curve
context.beginPath()
context.moveTo(50, 20)
context.quadraticCurveTo(230, 30, 50, 100)
context.stroke()
// Start and end points
context.fillStyle = "blue"
context.beginPath()
context.arc(50, 20, 5, 0, 2 * Math.PI, true) // Start point
context.arc(50, 100, 5, 0, 2 * Math.PI, true) // End point
context.fill();
// Control point
context.fillStyle = "red"
context.beginPath()
context.arc(230, 30, 5, 0, 2 * Math.PI, true)
context.fill()
context.restore()
},
resetTransform() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
// Draw a rotated rectangle
context.rotate((45 * Math.PI) / 180)
context.fillRect(60, 0, 100, 30)
// Reset transformation matrix to the identity matrix
context.resetTransform()
context.fillStyle = "red"
context.fillRect(60, 0, 100, 30)
context.restore()
},
transform() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.transform(1, 0.2, 0.8, 1, 0, 0)
context.fillRect(0, 0, 100, 100)
context.restore()
},
setFillStyle() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect();
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach((item : string, index : number) => {
context.fillStyle = item
context.beginPath()
context.rect(0 + 75 * index, 0, 50, 50)
context.fill()
})
context.restore()
},
setStrokeStyle() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect();
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach((item : string, index : number) => {
context.strokeStyle = item
context.beginPath()
context.rect(0 + 75 * index, 0, 50, 50)
context.stroke()
})
context.restore()
},
setGlobalAlpha() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.fillStyle = '#000000';
[1, 0.5, 0.1].forEach((item : number, index : number) => {
context.globalAlpha = item
context.beginPath()
context.rect(0 + 75 * index, 0, 50, 50)
context.fill()
})
context.globalAlpha = 1
context.restore()
},
setFontSize() {
const context = this.canvasContext!
context.save();
[10, 20, 30, 40].forEach((item : number, index : number) => {
context.font = item + 'px serif'
context.fillText('Hello, world', 20, 20 + 40 * index)
})
context.restore()
},
setLineCap() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.lineWidth = 10;
['butt', 'round', 'square'].forEach((item : string, index : number) => {
context.beginPath()
context.lineCap = item
context.moveTo(20, 20 + 20 * index)
context.lineTo(100, 20 + 20 * index)
context.stroke()
})
context.restore()
},
setLineJoin() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.lineWidth = 10;
['bevel', 'round', 'miter'].forEach((item : string, index : number) => {
context.beginPath()
context.lineJoin = item
context.moveTo(20 + 80 * index, 20)
context.lineTo(100 + 80 * index, 50)
context.lineTo(20 + 80 * index, 100)
context.stroke()
})
context.restore()
},
setLineWidth() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect();
[2, 4, 6, 8, 10].forEach((item : number, index : number) => {
context.beginPath()
context.lineWidth = item
context.moveTo(20, 20 + 20 * index)
context.lineTo(100, 20 + 20 * index)
context.stroke()
})
context.restore()
},
lineDash() {
const context = this.canvasContext!
context.save();
this.clearCanvasRect()
context.setLineDash([4, 16])
// Dashed line with no offset
context.beginPath()
context.moveTo(0, 50)
context.lineTo(300, 50)
context.stroke()
// Dashed line with offset of 4
context.beginPath()
context.strokeStyle = "red"
context.lineDashOffset = 4
context.moveTo(0, 100)
context.lineTo(300, 100)
context.stroke()
context.restore()
},
setMiterLimit() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
context.lineWidth = 4;
[2, 4, 6, 8, 10].forEach((item : number, index : number) => {
context.beginPath()
context.miterLimit = item
context.moveTo(20 + 80 * index, 20)
context.lineTo(100 + 80 * index, 50)
context.lineTo(20 + 80 * index, 100)
context.stroke()
})
context.restore()
},
measureText() {
const context = this.canvasContext!
context.save()
this.clearCanvasRect()
const text = "uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎"
context.font = "20px 宋体"
context.fillStyle = "red"
context.fillText(text, 0, 60)
const textMetrics = context.measureText(text)
context.strokeText(text, 40, 100)
context.fillText("measure text width:" + textMetrics.width, 40, 80)
context.restore()
},
clearCanvasRect() {
this.canvasContext!.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
}
}
}
</script>
<style>
.page {
flex: 1;
height: 100%;
overflow: hidden;
}
.scroll-view {
flex: 1;
}
.canvas-element {
width: 100%;
height: 250px;
background-color: #ffffff;
}
.grid-view {
padding: 10px;
flex-direction: row;
flex-wrap: wrap;
}
.grid-item {
width: 50%;
padding: 5px;
}
.btn-to-image {
margin: 10px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或