1
This commit is contained in:
parent
02334a2377
commit
679ec79bc6
@ -1,52 +1,46 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view>
|
||||||
<image class="logo" src="/static/logo.png"></image>
|
<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
|
||||||
<view class="text-area">
|
<canvas
|
||||||
<text class="title">{{title}}</text>
|
canvas-id="canvas"
|
||||||
</view>
|
id="canvas"
|
||||||
</view>
|
style="width: 200px; height: 200px;"
|
||||||
|
></canvas>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
export default {
|
import { onMounted } from 'vue'
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
title: 'Hello'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onLoad() {
|
|
||||||
|
|
||||||
},
|
function draw() {
|
||||||
methods: {
|
const ctx = uni.createCanvasContext('canvas') // 创建canvas绘图上下文
|
||||||
|
|
||||||
}
|
// 绘制外圆
|
||||||
}
|
ctx.beginPath() // 开始路径
|
||||||
|
ctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形
|
||||||
|
ctx.setFillStyle('rgba(0, 0, 255, 0.3)') // 设置填充颜色为蓝色，透明度为0.3
|
||||||
|
ctx.fill() // 填充所创建的路径
|
||||||
|
|
||||||
|
// 绘制内圆以形成环形效果
|
||||||
|
// ctx.beginPath() // 开始新的路径
|
||||||
|
// ctx.arc(100, 100, 60, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形
|
||||||
|
// ctx.setFillStyle('white') // 设置填充颜色为白色
|
||||||
|
// ctx.fill() // 填充以“清除”内部区域，形成环形
|
||||||
|
|
||||||
|
// // 如果需要绘制一个方块，例如在(50, 50)位置绘制一个40x40像素的正方形：
|
||||||
|
// ctx.beginPath() // 开始一个新的路径
|
||||||
|
// ctx.rect(50, 50, 40, 40) // 在画布上绘制一个左上角位于(50, 50)，宽高都是40像素的矩形
|
||||||
|
// ctx.setFillStyle('green') // 设置填充颜色为绿色
|
||||||
|
// ctx.fill() // 填充矩形
|
||||||
|
|
||||||
|
ctx.draw() // 将上述所有操作提交到canvas进行渲染
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
draw() // 页面加载完成后调用draw函数开始绘图
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
.content {
|
/* 样式部分 */
|
||||||
display: flex;
|
</style>
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 200rpx;
|
|
||||||
width: 200rpx;
|
|
||||||
margin-top: 200rpx;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-bottom: 50rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-area {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 36rpx;
|
|
||||||
color: #8f8f94;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
1
unpackage/dist/dev/.sourcemap/mp-weixin-devtools/pages/index/index.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin-devtools/pages/index/index.js.map
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"names":["draw","ctx","common_vendor","index","createCanvasContext","beginPath","arc","Math","PI","setFillStyle","setFillRule","fill","onMounted","wx","createPage","_sfc_main"],"sources":["index.vue","cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["<template>\n\t<view>\n\t\t<canvas \n\t\t\tcanvas-id=\"canvas\" \n\t\t\tstyle=\"width: 100px; height: 100px;\"\n\t\t></canvas>\n\t</view>\n</template>\n\n<script setup>\nimport { onMounted } from 'vue'\n\nfunction draw() {\n\tconst ctx = uni.createCanvasContext('canvas')\n\n\tctx.beginPath()\n\tctx.arc(50, 50, 30, 0, Math.PI * 2, true)\n\tctx.arc(50, 50, 15, 0, Math.PI * 2, true)\n\tctx.setFillStyle('black')\n\tctx.setFillRule('evenodd') // 设置填充规则\n\tctx.fill()\n\n\tctx.draw()\n}\n\nonMounted(() => {\n\tdraw()\n})\n</script>\n\n<style scoped>\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"mappings":";;;;;;;IAYA,SAASA,KAAA,EAAO;MACf,IAAMC,GAAA,GAAMC,aAAA,CAAAC,KAAA,CAAIC,mBAAA,CAAoB,QAAQ;MAE5CH,GAAA,CAAII,SAAA,EAAW;MACfJ,GAAA,CAAIK,GAAA,CAAI,IAAI,IAAI,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,GAAG,IAAI;MACxCP,GAAA,CAAIK,GAAA,CAAI,IAAI,IAAI,IAAI,GAAGC,IAAA,CAAKC,EAAA,GAAK,GAAG,IAAI;MACxCP,GAAA,CAAIQ,YAAA,CAAa,OAAO;MACxBR,GAAA,CAAIS,WAAA,CAAY,SAAS;MACzBT,GAAA,CAAIU,IAAA,EAAM;MAEVV,GAAA,CAAID,IAAA,EAAM;IACX;IAEAE,aAAA,CAAAU,SAAA,CAAU,YAAM;MACfZ,IAAA,EAAM;IACP,CAAC;;;;;;AC1BDa,EAAA,CAAGC,UAAA,CAAWC,SAAe","ignoreList":[]}
|
||||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
|||||||
{"version":3,"file":"index.js","sources":["pages/index/index.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["<template>\r\n\t<view class=\"content\">\r\n\t\t<image class=\"logo\" src=\"/static/logo.png\"></image>\r\n\t\t<view class=\"text-area\">\r\n\t\t\t<text class=\"title\">{{title}}</text>\r\n\t\t</view>\r\n\t</view>\r\n</template>\r\n\r\n<script>\r\n\texport default {\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\ttitle: 'Hello'\r\n\t\t\t}\r\n\t\t},\r\n\t\tonLoad() {\r\n\r\n\t\t},\r\n\t\tmethods: {\r\n\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style>\r\n\t.content {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t}\r\n\r\n\t.logo {\r\n\t\theight: 200rpx;\r\n\t\twidth: 200rpx;\r\n\t\tmargin-top: 200rpx;\r\n\t\tmargin-left: auto;\r\n\t\tmargin-right: auto;\r\n\t\tmargin-bottom: 50rpx;\r\n\t}\r\n\r\n\t.text-area {\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: center;\r\n\t}\r\n\r\n\t.title {\r\n\t\tfont-size: 36rpx;\r\n\t\tcolor: #8f8f94;\r\n\t}\r\n</style>\n","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":[],"mappings":";;;AAUC,MAAK,YAAU;AAAA,EACd,OAAO;AACN,WAAO;AAAA,MACN,OAAO;AAAA,IACR;AAAA,EACA;AAAA,EACD,SAAS;AAAA,EAER;AAAA,EACD,SAAS,CAET;AACD;;;;;;;;ACrBD,GAAG,WAAW,eAAe;"}
|
{"version":3,"file":"index.js","sources":["pages/index/index.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["<template>\n <view>\n <!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\n <canvas \n canvas-id=\"canvas\" \n id=\"canvas\"\n style=\"width: 200px; height: 200px;\" \n ></canvas>\n </view>\n</template>\n\n<script setup>\nimport { onMounted } from 'vue'\n\nfunction draw() {\n const ctx = uni.createCanvasContext('canvas') // 创建canvas绘图上下文\n\n // 绘制外圆\n ctx.beginPath() // 开始路径\n ctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\n ctx.setFillStyle('rgba(0, 0, 255, 0.3)') // 设置填充颜色为蓝色，透明度为0.3\n ctx.fill() // 填充所创建的路径\n \n // 绘制内圆以形成环形效果\n // ctx.beginPath() // 开始新的路径\n // ctx.arc(100, 100, 60, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形\n // ctx.setFillStyle('white') // 设置填充颜色为白色\n // ctx.fill() // 填充以“清除”内部区域，形成环形\n\n // // 如果需要绘制一个方块，例如在(50, 50)位置绘制一个40x40像素的正方形：\n // ctx.beginPath() // 开始一个新的路径\n // ctx.rect(50, 50, 40, 40) // 在画布上绘制一个左上角位于(50, 50)，宽高都是40像素的矩形\n // ctx.setFillStyle('green') // 设置填充颜色为绿色\n // ctx.fill() // 填充矩形\n \n ctx.draw() // 将上述所有操作提交到canvas进行渲染\n}\n\nonMounted(() => {\n draw() // 页面加载完成后调用draw函数开始绘图\n})\n</script>\n\n<style scoped>\n/* 样式部分 */\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":["uni","onMounted"],"mappings":";;;;;AAcA,aAAS,OAAO;AACd,YAAM,MAAMA,cAAAA,MAAI,oBAAoB,QAAQ;AAG5C,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,sBAAsB;AACvC,UAAI,KAAM;AAcV,UAAI,KAAM;AAAA,IACZ;AAEAC,kBAAAA,UAAU,MAAM;AACd,WAAM;AAAA,IACR,CAAC;;;;;;;ACvCD,GAAG,WAAW,eAAe;"}
|
||||||
40
unpackage/dist/dev/mp-weixin/common/vendor.js
vendored
40
unpackage/dist/dev/mp-weixin/common/vendor.js
vendored
@ -88,37 +88,6 @@ const looseToNumber = (val) => {
|
|||||||
const n = parseFloat(val);
|
const n = parseFloat(val);
|
||||||
return isNaN(n) ? val : n;
|
return isNaN(n) ? val : n;
|
||||||
};
|
};
|
||||||
const toDisplayString = (val) => {
|
|
||||||
return isString(val) ? val : val == null ? "" : isArray(val) || isObject(val) && (val.toString === objectToString || !isFunction(val.toString)) ? JSON.stringify(val, replacer, 2) : String(val);
|
|
||||||
};
|
|
||||||
const replacer = (_key, val) => {
|
|
||||||
if (val && val.__v_isRef) {
|
|
||||||
return replacer(_key, val.value);
|
|
||||||
} else if (isMap(val)) {
|
|
||||||
return {
|
|
||||||
[`Map(${val.size})`]: [...val.entries()].reduce(
|
|
||||||
(entries, [key, val2], i) => {
|
|
||||||
entries[stringifySymbol(key, i) + " =>"] = val2;
|
|
||||||
return entries;
|
|
||||||
},
|
|
||||||
{}
|
|
||||||
)
|
|
||||||
};
|
|
||||||
} else if (isSet(val)) {
|
|
||||||
return {
|
|
||||||
[`Set(${val.size})`]: [...val.values()].map((v) => stringifySymbol(v))
|
|
||||||
};
|
|
||||||
} else if (isSymbol(val)) {
|
|
||||||
return stringifySymbol(val);
|
|
||||||
} else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
|
|
||||||
return String(val);
|
|
||||||
}
|
|
||||||
return val;
|
|
||||||
};
|
|
||||||
const stringifySymbol = (v, i = "") => {
|
|
||||||
var _a;
|
|
||||||
return isSymbol(v) ? `Symbol(${(_a = v.description) != null ? _a : i})` : v;
|
|
||||||
};
|
|
||||||
const LOCALE_ZH_HANS = "zh-Hans";
|
const LOCALE_ZH_HANS = "zh-Hans";
|
||||||
const LOCALE_ZH_HANT = "zh-Hant";
|
const LOCALE_ZH_HANT = "zh-Hant";
|
||||||
const LOCALE_EN = "en";
|
const LOCALE_EN = "en";
|
||||||
@ -4962,7 +4931,6 @@ function getCreateApp() {
|
|||||||
return my[method];
|
return my[method];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const t = (val) => toDisplayString(val);
|
|
||||||
function createApp$1(rootComponent, rootProps = null) {
|
function createApp$1(rootComponent, rootProps = null) {
|
||||||
rootComponent && (rootComponent.mpType = "app");
|
rootComponent && (rootComponent.mpType = "app");
|
||||||
return createVueApp(rootComponent, rootProps).use(plugin);
|
return createVueApp(rootComponent, rootProps).use(plugin);
|
||||||
@ -5042,9 +5010,9 @@ function assertType(value, type) {
|
|||||||
let valid;
|
let valid;
|
||||||
const expectedType = getType(type);
|
const expectedType = getType(type);
|
||||||
if (isSimpleType(expectedType)) {
|
if (isSimpleType(expectedType)) {
|
||||||
const t2 = typeof value;
|
const t = typeof value;
|
||||||
valid = t2 === expectedType.toLowerCase();
|
valid = t === expectedType.toLowerCase();
|
||||||
if (!valid && t2 === "object") {
|
if (!valid && t === "object") {
|
||||||
valid = value instanceof type;
|
valid = value instanceof type;
|
||||||
}
|
}
|
||||||
} else if (expectedType === "Object") {
|
} else if (expectedType === "Object") {
|
||||||
@ -7725,5 +7693,5 @@ const createSubpackageApp = initCreateSubpackageApp();
|
|||||||
exports._export_sfc = _export_sfc;
|
exports._export_sfc = _export_sfc;
|
||||||
exports.createSSRApp = createSSRApp;
|
exports.createSSRApp = createSSRApp;
|
||||||
exports.index = index;
|
exports.index = index;
|
||||||
exports.t = t;
|
exports.onMounted = onMounted;
|
||||||
//# sourceMappingURL=../../.sourcemap/mp-weixin/common/vendor.js.map
|
//# sourceMappingURL=../../.sourcemap/mp-weixin/common/vendor.js.map
|
||||||
|
|||||||
@ -1,22 +1,24 @@
|
|||||||
"use strict";
|
"use strict";
|
||||||
const common_vendor = require("../../common/vendor.js");
|
const common_vendor = require("../../common/vendor.js");
|
||||||
const common_assets = require("../../common/assets.js");
|
|
||||||
const _sfc_main = {
|
const _sfc_main = {
|
||||||
data() {
|
__name: "index",
|
||||||
return {
|
setup(__props) {
|
||||||
title: "Hello"
|
function draw() {
|
||||||
|
const ctx = common_vendor.index.createCanvasContext("canvas");
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(100, 100, 80, 0, Math.PI * 2);
|
||||||
|
ctx.setFillStyle("rgba(0, 0, 255, 0.3)");
|
||||||
|
ctx.fill();
|
||||||
|
ctx.draw();
|
||||||
|
}
|
||||||
|
common_vendor.onMounted(() => {
|
||||||
|
draw();
|
||||||
|
});
|
||||||
|
return (_ctx, _cache) => {
|
||||||
|
return {};
|
||||||
};
|
};
|
||||||
},
|
}
|
||||||
onLoad() {
|
|
||||||
},
|
|
||||||
methods: {}
|
|
||||||
};
|
};
|
||||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-1cf27b2a"]]);
|
||||||
return {
|
|
||||||
a: common_assets._imports_0,
|
|
||||||
b: common_vendor.t($data.title)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
||||||
wx.createPage(MiniProgramPage);
|
wx.createPage(MiniProgramPage);
|
||||||
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/index.js.map
|
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/index.js.map
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
<view class="content"><image class="logo" src="{{a}}"></image><view class="text-area"><text class="title">{{b}}</text></view></view>
|
<view class="data-v-1cf27b2a"><canvas class="data-v-1cf27b2a" canvas-id="canvas" id="canvas" style="width:200px;height:200px"></canvas></view>
|
||||||
@ -1,23 +1,2 @@
|
|||||||
|
|
||||||
.content {
|
/* 样式部分 */
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.logo {
|
|
||||||
height: 200rpx;
|
|
||||||
width: 200rpx;
|
|
||||||
margin-top: 200rpx;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-bottom: 50rpx;
|
|
||||||
}
|
|
||||||
.text-area {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
font-size: 36rpx;
|
|
||||||
color: #8f8f94;
|
|
||||||
}
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user