1
This commit is contained in:
parent
679ec79bc6
commit
9635facb16
@ -1,46 +1,46 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
|
||||
<canvas
|
||||
canvas-id="canvas"
|
||||
id="canvas"
|
||||
style="width: 200px; height: 200px;"
|
||||
></canvas>
|
||||
<canvas canvas-id="canvas" id="canvas" style="width: 200px; height: 200px;"></canvas>
|
||||
|
||||
<!-- 添加一个按钮，用于触发绘图 -->
|
||||
<button @click="handleDraw()">点击绘制圆形</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
|
||||
// 定义绘图函数
|
||||
function draw() {
|
||||
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.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色，无透明度
|
||||
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.beginPath() // 开始新的路径
|
||||
ctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形
|
||||
ctx.setFillStyle('white') // 设置填充颜色为白色
|
||||
ctx.fill() // 填充以“清除”内部区域，形成环形
|
||||
ctx.draw() // 将上述所有操作提交到canvas进行渲染
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
draw() // 页面加载完成后调用draw函数开始绘图
|
||||
})
|
||||
// 按钮点击事件处理函数
|
||||
const handleDraw = () => {
|
||||
draw(); // 调用绘图函数
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式部分 */
|
||||
button {
|
||||
margin-top: 10px;
|
||||
/* 给按钮设置一些上边距以避免过于紧凑 */
|
||||
}
|
||||
</style>
|
||||
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>\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;"}
|
||||
{"version":3,"file":"index.js","sources":["pages/index/index.vue","../../HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvaW5kZXgvaW5kZXgudnVl"],"sourcesContent":["<template>\r\n\t<view>\r\n\t\t<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->\r\n\t\t<canvas canvas-id=\"canvas\" id=\"canvas\" style=\"width: 200px; height: 200px;\"></canvas>\r\n\r\n\t\t<!-- 添加一个按钮，用于触发绘图 -->\r\n\t\t<button @click=\"handleDraw()\">点击绘制圆形</button>\r\n\t</view>\r\n</template>\r\n\r\n<script setup>\r\n\timport {\r\n\t\tref\r\n\t} from 'vue'\r\n\r\n\t// 定义绘图函数\r\n\tfunction draw() {\r\n\t\tconst ctx = uni.createCanvasContext('canvas') // 创建canvas绘图上下文\r\n\r\n\t\t// 绘制外圆\r\n\t\tctx.beginPath() // 开始路径\r\n\t\tctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形\r\n\t\tctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色，无透明度\r\n\t\tctx.fill() // 填充所创建的路径\r\n\t\t\r\n\t\t// 绘制内圆以形成环形效果\r\n\t\tctx.beginPath() // 开始新的路径\r\n\t\tctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形\r\n\t\tctx.setFillStyle('white') // 设置填充颜色为白色\r\n\t\tctx.fill() // 填充以“清除”内部区域，形成环形\r\n\t\tctx.draw() // 将上述所有操作提交到canvas进行渲染\r\n\t}\r\n\r\n\t// 按钮点击事件处理函数\r\n\tconst handleDraw = () => {\r\n\t\tdraw(); // 调用绘图函数\r\n\t}\r\n</script>\r\n\r\n<style scoped>\r\n\t/* 样式部分 */\r\n\tbutton {\r\n\t\tmargin-top: 10px;\r\n\t\t/* 给按钮设置一些上边距以避免过于紧凑 */\r\n\t}\r\n</style>","import MiniProgramPage from 'C:/Users/hp/Desktop/app/canvas/pages/index/index.vue'\nwx.createPage(MiniProgramPage)"],"names":["uni"],"mappings":";;;;;AAgBC,aAAS,OAAO;AACf,YAAM,MAAMA,cAAAA,MAAI,oBAAoB,QAAQ;AAG5C,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,kBAAkB;AACnC,UAAI,KAAM;AAGV,UAAI,UAAW;AACf,UAAI,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AACpC,UAAI,aAAa,OAAO;AACxB,UAAI,KAAM;AACV,UAAI,KAAM;AAAA,IACV;AAGD,UAAM,aAAa,MAAM;AACxB;IACA;;;;;;;;;ACnCF,GAAG,WAAW,eAAe;"}
|
||||
97
unpackage/dist/dev/mp-weixin/common/vendor.js
vendored
97
unpackage/dist/dev/mp-weixin/common/vendor.js
vendored
@ -4931,6 +4931,101 @@ function getCreateApp() {
|
||||
return my[method];
|
||||
}
|
||||
}
|
||||
function vOn(value, key) {
|
||||
const instance = getCurrentInstance();
|
||||
const ctx = instance.ctx;
|
||||
const extraKey = typeof key !== "undefined" && (ctx.$mpPlatform === "mp-weixin" || ctx.$mpPlatform === "mp-qq" || ctx.$mpPlatform === "mp-xhs") && (isString(key) || typeof key === "number") ? "_" + key : "";
|
||||
const name = "e" + instance.$ei++ + extraKey;
|
||||
const mpInstance = ctx.$scope;
|
||||
if (!value) {
|
||||
delete mpInstance[name];
|
||||
return name;
|
||||
}
|
||||
const existingInvoker = mpInstance[name];
|
||||
if (existingInvoker) {
|
||||
existingInvoker.value = value;
|
||||
} else {
|
||||
mpInstance[name] = createInvoker(value, instance);
|
||||
}
|
||||
return name;
|
||||
}
|
||||
function createInvoker(initialValue, instance) {
|
||||
const invoker = (e2) => {
|
||||
patchMPEvent(e2);
|
||||
let args = [e2];
|
||||
if (instance && instance.ctx.$getTriggerEventDetail) {
|
||||
if (typeof e2.detail === "number") {
|
||||
e2.detail = instance.ctx.$getTriggerEventDetail(e2.detail);
|
||||
}
|
||||
}
|
||||
if (e2.detail && e2.detail.__args__) {
|
||||
args = e2.detail.__args__;
|
||||
}
|
||||
const eventValue = invoker.value;
|
||||
const invoke = () => callWithAsyncErrorHandling(patchStopImmediatePropagation(e2, eventValue), instance, 5, args);
|
||||
const eventTarget = e2.target;
|
||||
const eventSync = eventTarget ? eventTarget.dataset ? String(eventTarget.dataset.eventsync) === "true" : false : false;
|
||||
if (bubbles.includes(e2.type) && !eventSync) {
|
||||
setTimeout(invoke);
|
||||
} else {
|
||||
const res = invoke();
|
||||
if (e2.type === "input" && (isArray(res) || isPromise(res))) {
|
||||
return;
|
||||
}
|
||||
return res;
|
||||
}
|
||||
};
|
||||
invoker.value = initialValue;
|
||||
return invoker;
|
||||
}
|
||||
const bubbles = [
|
||||
// touch事件暂不做延迟，否则在 Android 上会影响性能，比如一些拖拽跟手手势等
|
||||
// 'touchstart',
|
||||
// 'touchmove',
|
||||
// 'touchcancel',
|
||||
// 'touchend',
|
||||
"tap",
|
||||
"longpress",
|
||||
"longtap",
|
||||
"transitionend",
|
||||
"animationstart",
|
||||
"animationiteration",
|
||||
"animationend",
|
||||
"touchforcechange"
|
||||
];
|
||||
function patchMPEvent(event, instance) {
|
||||
if (event.type && event.target) {
|
||||
event.preventDefault = NOOP;
|
||||
event.stopPropagation = NOOP;
|
||||
event.stopImmediatePropagation = NOOP;
|
||||
if (!hasOwn(event, "detail")) {
|
||||
event.detail = {};
|
||||
}
|
||||
if (hasOwn(event, "markerId")) {
|
||||
event.detail = typeof event.detail === "object" ? event.detail : {};
|
||||
event.detail.markerId = event.markerId;
|
||||
}
|
||||
if (isPlainObject(event.detail) && hasOwn(event.detail, "checked") && !hasOwn(event.detail, "value")) {
|
||||
event.detail.value = event.detail.checked;
|
||||
}
|
||||
if (isPlainObject(event.detail)) {
|
||||
event.target = extend({}, event.target, event.detail);
|
||||
}
|
||||
}
|
||||
}
|
||||
function patchStopImmediatePropagation(e2, value) {
|
||||
if (isArray(value)) {
|
||||
const originalStop = e2.stopImmediatePropagation;
|
||||
e2.stopImmediatePropagation = () => {
|
||||
originalStop && originalStop.call(e2);
|
||||
e2._stopped = true;
|
||||
};
|
||||
return value.map((fn) => (e3) => !e3._stopped && fn(e3));
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
const o = (value, key) => vOn(value, key);
|
||||
function createApp$1(rootComponent, rootProps = null) {
|
||||
rootComponent && (rootComponent.mpType = "app");
|
||||
return createVueApp(rootComponent, rootProps).use(plugin);
|
||||
@ -7693,5 +7788,5 @@ const createSubpackageApp = initCreateSubpackageApp();
|
||||
exports._export_sfc = _export_sfc;
|
||||
exports.createSSRApp = createSSRApp;
|
||||
exports.index = index;
|
||||
exports.onMounted = onMounted;
|
||||
exports.o = o;
|
||||
//# sourceMappingURL=../../.sourcemap/mp-weixin/common/vendor.js.map
|
||||
|
||||
@ -7,15 +7,21 @@ const _sfc_main = {
|
||||
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.setFillStyle("rgba(0, 0, 0, 1)");
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(100, 100, 75, 0, Math.PI * 2);
|
||||
ctx.setFillStyle("white");
|
||||
ctx.fill();
|
||||
ctx.draw();
|
||||
}
|
||||
common_vendor.onMounted(() => {
|
||||
const handleDraw = () => {
|
||||
draw();
|
||||
});
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
return {};
|
||||
return {
|
||||
a: common_vendor.o(($event) => handleDraw())
|
||||
};
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@ -1 +1 @@
|
||||
<view class="data-v-1cf27b2a"><canvas class="data-v-1cf27b2a" canvas-id="canvas" id="canvas" style="width:200px;height:200px"></canvas></view>
|
||||
<view class="data-v-1cf27b2a"><canvas class="data-v-1cf27b2a" canvas-id="canvas" id="canvas" style="width:200px;height:200px"></canvas><button class="data-v-1cf27b2a" bindtap="{{a}}">点击绘制圆形</button></view>
|
||||
@ -1,2 +1,6 @@
|
||||
|
||||
/* 样式部分 */
|
||||
button.data-v-1cf27b2a {
|
||||
margin-top: 10px;
|
||||
/* 给按钮设置一些上边距以避免过于紧凑 */
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user