Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5992
Star 90
Fork 162
H
hello uni-app x
提交 c0c091c8 编写于 作者: 张 张磊
浏览文件
操作

支持贝塞尔曲线

上级 2722c735
隐藏空白更改
内联 并排
Showing with 292 addition and 269 deletion
pages/component/view/view-draw.uvue
浏览文件 @ c0c091c8
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1"> <scroll-view style="flex: 1">
<!-- #endif --> <!-- #endif -->
<view> <view>
<view ref="draw-text-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view> <view ref="draw-text-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
<view ref="draw-line-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view> <view ref="draw-line-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
<view ref="draw-circle-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view> <view ref="draw-circle-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
<view ref="draw-dash-line" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view> <view ref="draw-dash-line" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
<view ref="draw-house" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view> <view ref="draw-house" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
<view ref="draw-style" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view> <view ref="draw-style" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
<view ref="draw-odd" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view> <view ref="draw-odd" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
</view> <view ref="draw-arcto" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
<!-- #ifdef APP --> </view>
</scroll-view> <!-- #ifdef APP -->
<!-- #endif --> </scroll-view>
<!-- #endif -->
</template> </template>
<script> <script>
var y = 160 var y = 160
export default { export default {
data() { data() {
return { return {
texts: [ texts: [
'HBuilderX，轻巧、极速，极客编辑器', 'HBuilderX，轻巧、极速，极客编辑器',
'uni-app x，终极跨平台方案', 'uni-app x，终极跨平台方案',
'uniCloud，js serverless云服务', 'uniCloud，js serverless云服务',
'uts，大一统语言', 'uts，大一统语言',
'uniMPSdk，让你的App具备小程序能力', 'uniMPSdk，让你的App具备小程序能力',
'uni-admin，开源、现成的全端管理后台', 'uni-admin，开源、现成的全端管理后台',
'uni-id，开源、全端的账户中心', 'uni-id，开源、全端的账户中心',
'uni-pay，开源、云端一体、全平台的支付', 'uni-pay，开源、云端一体、全平台的支付',
'uni-ai，聚合ai能力', 'uni-ai，聚合ai能力',
'uni-cms，开源、云端一体、全平台的内容管理平台', 'uni-cms，开源、云端一体、全平台的内容管理平台',
'uni-im，开源、云端一体、全平台的im即时消息', 'uni-im，开源、云端一体、全平台的im即时消息',
'uni统计，开源、完善、全平台的统计报表', 'uni统计，开源、完善、全平台的统计报表',
'......' '......'
] as string[] ] as string[]
} }
}, },
onShow() { onShow() {
}, },
onReady() { onReady() {
this.drawText() this.drawText()
this.drawLines() this.drawLines()
this.drawCircles() this.drawCircles()
this.drawStar() this.drawStar()
this.drawhouse() this.drawhouse()
this.drawPoint() this.drawPoint()
this.drawRect() this.drawRect()
}, this.drawArcTo()
onUnload() { },
y = 160 onUnload() {
}, y = 160
methods: { },
drawText() { methods: {
let node = (this.$refs['draw-text-view'] as Element) drawText() {
let ctx = node.getDrawableContext() let node = (this.$refs['draw-text-view'] as INode)
let width = node.getBoundingClientRect().width let ctx = node.getDrawableContext()
ctx!!.reset() let width = node.getBoundingClientRect().width
ctx!!.font = "15px" ctx!!.reset()
ctx!.textAlign = "center" ctx!!.font = "15px"
for (var i = 0; i < this.texts.length; i++) { ctx!.textAlign = "center"
let value = this.texts[i] for (var i = 0; i < this.texts.length; i++) {
if (i % 2 == 0) { let value = this.texts[i]
ctx!!.fillText(value, width / 2, (20 * (i + 1))) if (i % 2 == 0) {
} else { ctx!!.fillText(value, width / 2, (20 * (i + 1)))
ctx!!.strokeText(value, width / 2, (20 * (i + 1))) } else {
} ctx!!.strokeText(value, width / 2, (20 * (i + 1)))
} }
ctx!!.update() }
}, ctx!!.update()
drawLines() { },
let ctx = (this.$refs['draw-line-view'] as Element).getDrawableContext() drawLines() {
ctx!!.reset() let ctx = (this.$refs['draw-line-view'] as INode).getDrawableContext()
ctx!!.lineWidth = 10; ctx!!.reset()
ctx!!.lineWidth = 10;
["round", "bevel", "miter"].forEach((join, i) => { ["round", "bevel", "miter"].forEach((join, i) => {
ctx!.lineJoin = join; ctx!.lineJoin = join;
ctx!.beginPath(); ctx!.beginPath();
ctx!.moveTo(5, 10 + i * 40); ctx!.moveTo(5, 10 + i * 40);
ctx!.lineTo(50, 50 + i * 40); ctx!.lineTo(50, 50 + i * 40);
ctx!.lineTo(90, 10 + i * 40); ctx!.lineTo(90, 10 + i * 40);
ctx!.lineTo(130, 50 + i * 40); ctx!.lineTo(130, 50 + i * 40);
ctx!.lineTo(170, 10 + i * 40); ctx!.lineTo(170, 10 + i * 40);
ctx!.stroke(); ctx!.stroke();
}); });
ctx!!.lineWidth = 1 ctx!!.lineWidth = 1
var space = 170 var space = 170
ctx!.strokeStyle = '#09f'; ctx!.strokeStyle = '#09f';
ctx!.beginPath(); ctx!.beginPath();
ctx!.moveTo(10 + space, 10); ctx!.moveTo(10 + space, 10);
ctx!.lineTo(140 + space, 10); ctx!.lineTo(140 + space, 10);
ctx!.moveTo(10 + space, 140); ctx!.moveTo(10 + space, 140);
ctx!.lineTo(140 + space, 140); ctx!.lineTo(140 + space, 140);
ctx!.stroke(); ctx!.stroke();
// Draw lines // Draw lines
ctx!.strokeStyle = 'black'; ctx!.strokeStyle = 'black';
['butt', 'round', 'square'].forEach((lineCap, i) => { ['butt', 'round', 'square'].forEach((lineCap, i) => {
ctx!.lineWidth = 15; ctx!.lineWidth = 15;
ctx!.lineCap = lineCap; ctx!.lineCap = lineCap;
ctx!.beginPath(); ctx!.beginPath();
ctx!.moveTo(25 + space + i * 50, 10); ctx!.moveTo(25 + space + i * 50, 10);
ctx!.lineTo(25 + space + i * 50, 140); ctx!.lineTo(25 + space + i * 50, 140);
ctx!.stroke(); ctx!.stroke();
}); });
ctx!.lineWidth = 1; ctx!.lineWidth = 1;
this.drawDashedLine([], ctx); this.drawDashedLine([], ctx!);
this.drawDashedLine([2, 2], ctx); this.drawDashedLine([2, 2], ctx!);
this.drawDashedLine([10, 10], ctx); this.drawDashedLine([10, 10], ctx!);
this.drawDashedLine([20, 5], ctx); this.drawDashedLine([20, 5], ctx!);
this.drawDashedLine([15, 3, 3, 3], ctx); this.drawDashedLine([15, 3, 3, 3], ctx!);
this.drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3], ctx); this.drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3], ctx!);
ctx!.lineDashOffset = 18; ctx!.lineDashOffset = 18;
this.drawDashedLine([12, 3, 3], ctx); this.drawDashedLine([12, 3, 3], ctx!);
ctx!.lineDashOffset = 0 ctx!.lineDashOffset = 0
ctx!.setLineDash([0]) ctx!.setLineDash([0])
ctx!!.update() ctx!!.update()
}, },
drawDashedLine(pattern : Array<number>, ctx : DrawableContext) { drawDashedLine(pattern : Array<number>, ctx : DrawableContext) {
ctx.beginPath(); ctx.beginPath();
ctx.setLineDash(pattern); ctx.setLineDash(pattern);
ctx.moveTo(0, y); ctx.moveTo(0, y);
ctx.lineTo(300, y); ctx.lineTo(300, y);
ctx.stroke(); ctx.stroke();
y += 15; y += 15;
}, },
drawCircles() { drawCircles() {
let ctx = (this.$refs['draw-circle-view'] as Element).getDrawableContext() let ctx = (this.$refs['draw-circle-view'] as INode).getDrawableContext()
ctx!!.reset() ctx!!.reset()
// Draw shapes // Draw shapes
for (var i = 0; i < 4; i++) { for (var i = 0; i < 4; i++) {
for (var j = 0; j < 3; j++) { for (var j = 0; j < 3; j++) {
ctx!!.beginPath(); ctx!!.beginPath();
var x = 25 + j * 50; // x coordinate var x = 25 + j * 50; // x coordinate
var y = 25 + i * 50; // y coordinate var y = 25 + i * 50; // y coordinate
var radius = 20; // Arc radius var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle var startAngle = 0; // Starting point on circle
var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
var clockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise var clockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
ctx!.arc(x, y, radius, startAngle, endAngle, clockwise); ctx!.arc(x, y, radius, startAngle, endAngle, clockwise);
if (i > 1) { if (i > 1) {
ctx!.fill(); ctx!.fill();
} else { } else {
ctx!.stroke(); ctx!.stroke();
} }
} }
} }
ctx!!.update() ctx!!.update()
}, },
drawStar() { drawStar() {
let ctx = (this.$refs['draw-dash-line'] as Element).getDrawableContext() let ctx = (this.$refs['draw-dash-line'] as INode).getDrawableContext()
ctx!!.reset() ctx!!.reset()
ctx!!.beginPath(); ctx!!.beginPath();
var horn = 5; // 画5个角 var horn = 5; // 画5个角
var angle = 360 / horn; // 五个角的度数 var angle = 360 / horn; // 五个角的度数
// 两个圆的半径 // 两个圆的半径
var R = 50; var R = 50;
var r = 20; var r = 20;
// 坐标 // 坐标
var x = 100; var x = 100;
var y = 100; var y = 100;
for (var i = 0; i < horn; i++) { for (var i = 0; i < horn; i++) {
// 角度转弧度：角度/180*Math.PI // 角度转弧度：角度/180*Math.PI
// 外圆顶点坐标 // 外圆顶点坐标
ctx!.lineTo(Math.cos((18 + i * angle) / 180.0 * Math.PI) * R + x, -Math.sin((18 + i * angle) / 180.0 * Math.PI) * R + y); ctx!.lineTo(Math.cos((18 + i * angle) / 180.0 * Math.PI) * R + x, -Math.sin((18 + i * angle) / 180.0 * Math.PI) * R + y);
// 內圆顶点坐标 // 內圆顶点坐标
ctx!.lineTo(Math.cos((54 + i * angle) / 180.0 * Math.PI) * r + x, -Math.sin((54 + i * angle) / 180.0 * Math.PI) * r + y); ctx!.lineTo(Math.cos((54 + i * angle) / 180.0 * Math.PI) * r + x, -Math.sin((54 + i * angle) / 180.0 * Math.PI) * r + y);
} }
// closePath：关闭路径，将路径的终点与起点相连 // closePath：关闭路径，将路径的终点与起点相连
ctx!.closePath(); ctx!.closePath();
ctx!.lineWidth = 3; ctx!.lineWidth = 3;
ctx!.fillStyle = '#E4EF00'; ctx!.fillStyle = '#E4EF00';
ctx!.strokeStyle = "red"; ctx!.strokeStyle = "red";
ctx!.fill(); ctx!.fill();
ctx!.stroke(); ctx!.stroke();
ctx!.lineWidth = 10; ctx!.lineWidth = 10;
ctx!.beginPath() ctx!.beginPath()
ctx!.moveTo(170, 100) ctx!.moveTo(170, 100)
ctx!.lineTo(255, 15) ctx!.lineTo(255, 15)
ctx!.lineTo(340, 100) ctx!.lineTo(340, 100)
ctx!.closePath() ctx!.closePath()
ctx!.fill() ctx!.fill()
ctx!.strokeStyle = "blue" ctx!.strokeStyle = "blue"
ctx!.stroke() ctx!.stroke()
ctx!.beginPath() ctx!.beginPath()
ctx!.moveTo(170, 145) ctx!.moveTo(170, 145)
ctx!.lineTo(255, 45) ctx!.lineTo(255, 45)
ctx!.lineTo(340, 145) ctx!.lineTo(340, 145)
ctx!.closePath() ctx!.closePath()
ctx!.fill() ctx!.fill()
ctx!.strokeStyle = "gray" ctx!.strokeStyle = "gray"
ctx!.stroke() ctx!.stroke()
// 未设置beginPath，导致上下表现一致，与前端一致 // 未设置beginPath，导致上下表现一致，与前端一致
ctx!.moveTo(170, 190) ctx!.moveTo(170, 190)
ctx!.lineTo(255, 90) ctx!.lineTo(255, 90)
ctx!.lineTo(340, 190) ctx!.lineTo(340, 190)
ctx!.closePath() ctx!.closePath()
ctx!.fillStyle = "orange" ctx!.fillStyle = "orange"
ctx!.fill() ctx!.fill()
ctx!.strokeStyle = "khaki" ctx!.strokeStyle = "khaki"
ctx!.stroke() ctx!.stroke()
ctx!!.update() ctx!!.update()
}, },
hex(num : number) : string { hex(num : number) : string {
if (num == 0) { if (num == 0) {
return "00" return "00"
} }
let hexChars = "0123456789ABCDEF"; let hexChars = "0123456789ABCDEF";
let result = ""; let result = "";
while (num > 0) { while (num > 0) {
let remainder : Int = num.toInt() % 16; let remainder : Int = num.toInt() % 16;
result = hexChars[remainder] + result; result = hexChars[remainder] + result;
num = Math.floor(num.toInt() / 16); num = Math.floor(num.toInt() / 16);
} }
if (result.length == 1) { if (result.length == 1) {
return "0" + result return "0" + result
} }
return result return result
}, },
drawhouse() { drawhouse() {
let ctx = (this.$refs['draw-house'] as Element).getDrawableContext() let ctx = (this.$refs['draw-house'] as INode).getDrawableContext()
ctx!!.reset() ctx!!.reset()
ctx!!.lineWidth = 10; ctx!!.lineWidth = 10;
// Wall // Wall
ctx!.strokeRect(75, 140, 150, 110); ctx!.strokeRect(75, 140, 150, 110);
// Door // Door
ctx!.fillRect(130, 190, 40, 60); ctx!.fillRect(130, 190, 40, 60);
// Roof // Roof
ctx!.beginPath(); ctx!.beginPath();
ctx!.moveTo(50, 140); ctx!.moveTo(50, 140);
ctx!.lineTo(150, 60); ctx!.lineTo(150, 60);
ctx!.lineTo(250, 140); ctx!.lineTo(250, 140);
ctx!.closePath(); ctx!.closePath();
ctx!.stroke(); ctx!.stroke();
ctx!!.update() ctx!!.update()
}, },
drawPoint() { drawPoint() {
let ctx = (this.$refs['draw-style'] as Element).getDrawableContext() let ctx = (this.$refs['draw-style'] as INode).getDrawableContext()
ctx!!.reset() ctx!!.reset()
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) { for (let j = 0; j < 6; j++) {
ctx!!.strokeStyle = `rgb(0,${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)})`; ctx!!.strokeStyle = `rgb(0,${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)})`;
ctx!.beginPath(); ctx!.beginPath();
ctx!.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true); ctx!.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
ctx!.stroke(); ctx!.stroke();
} }
} }
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) { for (let j = 0; j < 6; j++) {
ctx!!.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)},0)`; ctx!!.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)},0)`;
ctx!.fillRect(180 + j * 25, i * 25, 25, 25); ctx!.fillRect(180 + j * 25, i * 25, 25, 25);
} }
} }
ctx!!.update() ctx!!.update()
}, },
drawRect() { drawRect() {
let ctx = (this.$refs['draw-odd'] as Element).getDrawableContext() let ctx = (this.$refs['draw-odd'] as INode).getDrawableContext()
ctx!!.reset() ctx!!.reset()
// Create path // Create path
ctx!!.moveTo(30, 90); ctx!!.moveTo(30, 90);
ctx!.lineTo(110, 20); ctx!.lineTo(110, 20);
ctx!.lineTo(240, 130); ctx!.lineTo(240, 130);
ctx!.lineTo(60, 130); ctx!.lineTo(60, 130);
ctx!.lineTo(190, 20); ctx!.lineTo(190, 20);
ctx!.lineTo(270, 90); ctx!.lineTo(270, 90);
ctx!.closePath(); ctx!.closePath();
// Fill path // Fill path
ctx!.fillStyle = "green"; ctx!.fillStyle = "green";
ctx!.fill("evenodd"); ctx!.fill("evenodd");
ctx!!.update() ctx!!.update()
} },
} drawArcTo() {
} let ctx = (this.$refs['draw-arcto'] as INode).getDrawableContext()
ctx!.reset()
ctx!.beginPath();
ctx!.moveTo(50, 20);
ctx!.bezierCurveTo(230, 30, 150, 60, 50, 100);
ctx!.stroke();
ctx!.fillStyle = "blue";
// start point
ctx!.fillRect(50, 20, 10, 10);
// end point
ctx!.fillRect(50, 100, 10, 10);
ctx!.fillStyle = "red";
// control point one
ctx!.fillRect(230, 30, 10, 10);
// control point two
ctx!.fillRect(150, 70, 10, 10);
ctx!.update()
}
}
}
</script> </script>
<style> <style>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或