From d7fdf239019cb1f0f49ff1f34519171d631011eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A6=86=E9=92=B1=E8=90=BD=E5=B0=BD=E6=A7=BF=E8=8A=B1?= =?UTF-8?q?=E7=A8=80?= <2675540038@qq.com> Date: Tue, 17 Jun 2025 16:51:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=B8=80=E7=B3=BB=E5=88=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packageA/afterSales/index.vue | 8 +- packageA/afterSales/info.vue | 13 +- packageA/center/applyDetail.vue | 10 +- packageA/center/detail.vue | 10 +- packageA/center/detailSys.vue | 8 +- packageA/center/signDetail.vue | 1 + packageA/cropper.vue | 250 ++- packageA/my/exercise.vue | 2 +- packageA/my/orderList.vue | 8 +- packageA/my/pendinPay.vue | 2 +- packageA/my/pendinPayDetail.vue | 2583 +++++++++++++++--------------- packageA/my/pendinPayStatus.vue | 10 +- packageA/my/person-detail.vue | 2 +- packageA/my/stationDetail.vue | 23 +- packageB/names/index.vue | 2 +- packageB/wallet/bank.vue | 9 +- pages/activity/stationStemys.vue | 2 +- pages/center/index.vue | 2 +- pages/my/applyOwner.vue | 2 +- utils/weCropper.js | 298 +++- 20 files changed, 1733 insertions(+), 1512 deletions(-) diff --git a/packageA/afterSales/index.vue b/packageA/afterSales/index.vue index aa00834..82a0c88 100644 --- a/packageA/afterSales/index.vue +++ b/packageA/afterSales/index.vue @@ -22,7 +22,7 @@ {{detail.title}} - {{detail.address_detail}} + {{detail.address}}{{detail.address_detail}} @@ -507,7 +507,7 @@ width: 430rpx; // height: 77rpx; font-family: PingFang SC, PingFang SC; - font-weight: 400; + font-weight: 600; font-size: 28rpx; color: #323232; // margin-left: 16rpx; @@ -695,12 +695,12 @@ // height: 1100rpx; .popup_tk{ - font-size: 42rpx;font-weight: 800;margin: 12rpx 0 24rpx 0;height: 120rpx; + font-size: 42rpx;font-weight: 800;margin: 12rpx 0 24rpx 0; text-align: center; } .popup-content{ height: 700rpx; - margin-bottom: 140rpx; + margin-bottom: 75rpx; // overflow-y: auto; } .popup-content-item{ diff --git a/packageA/afterSales/info.vue b/packageA/afterSales/info.vue index 5462abe..9c0412a 100644 --- a/packageA/afterSales/info.vue +++ b/packageA/afterSales/info.vue @@ -5,7 +5,7 @@ - + @@ -187,7 +187,7 @@ - {{ info.detail.address_detail }} + {{ info.detail.address }}{{ info.detail.address_detail }} @@ -231,7 +231,7 @@ - {{ info.detail.address_detail }} + {{ info.detail.address }}{{ info.detail.address_detail }} @@ -299,6 +299,11 @@ export default { } }, methods: { + toDetail() { + uni.navigateTo({ + url: '/packageA/center/detail?id=' + this.info.activity_id + }); + }, SuccessDo(type) { uni.$u.http.post('/api/school.newworker.activity.order/shop_confirmation', { order_no: this.id, @@ -483,7 +488,7 @@ export default { width: 440rpx; height: 39rpx; font-family: PingFang SC, PingFang SC; - font-weight: 400; + font-weight: 600; font-size: 28rpx; color: #323232; // margin-left: 16rpx; diff --git a/packageA/center/applyDetail.vue b/packageA/center/applyDetail.vue index 359c538..c4954f1 100644 --- a/packageA/center/applyDetail.vue +++ b/packageA/center/applyDetail.vue @@ -305,8 +305,8 @@ 《用户参与须知》 - + @@ -408,8 +408,8 @@ export default { qrUrl: '', is_collect: 0, popupStylezf: { - width: '642rpx', - padding: '24rpx 24rpx 42rpx 24rpx', + width: '620rpx', + padding: '50rpx 40rpx 40rpx 40rpx', height: '984rpx', margin: '0 auto', // 水平居中 display: 'flex', @@ -1135,7 +1135,7 @@ export default { width: 430rpx; // height: 77rpx; font-family: PingFang SC, PingFang SC; - font-weight: 400; + font-weight: 600; font-size: 28rpx; color: #323232; // margin-left: 16rpx; diff --git a/packageA/center/detail.vue b/packageA/center/detail.vue index d5eb6d0..5e2f50b 100644 --- a/packageA/center/detail.vue +++ b/packageA/center/detail.vue @@ -2,7 +2,7 @@ + title="详情" :titleStyle="{color:'#000000',fontSize:'34rpx',fontWeight:'bold'}"> @@ -110,7 +110,7 @@ - + @@ -1236,10 +1236,8 @@ height: 100%; .v_html { - word-wrap: break-word; - word-break: break-all; - font-size: 26rpx; - line-height: 42rpx; + font-size: 28rpx; + line-height: 44rpx; } .imgs { diff --git a/packageA/center/detailSys.vue b/packageA/center/detailSys.vue index 4c0cc28..97e5ac0 100644 --- a/packageA/center/detailSys.vue +++ b/packageA/center/detailSys.vue @@ -2,7 +2,7 @@ + :titleStyle="{color:'#000000',fontSize:'34rpx',fontWeight:'bold'}"> @@ -162,7 +162,7 @@ - + @@ -1176,8 +1176,8 @@ margin: 0 auto; .v_html { - word-wrap: break-word; - word-break: break-all; + font-size: 28rpx; + line-height: 44rpx; } .imgs { diff --git a/packageA/center/signDetail.vue b/packageA/center/signDetail.vue index b81887d..37b5e56 100644 --- a/packageA/center/signDetail.vue +++ b/packageA/center/signDetail.vue @@ -81,6 +81,7 @@ uni.$u.http.get('/api/school.newworker.activity.order/order_list', { params: { activity_id: that.id, + status:'2,3,9', page: 1, limit: 1000, }, diff --git a/packageA/cropper.vue b/packageA/cropper.vue index eb96474..1276e1f 100644 --- a/packageA/cropper.vue +++ b/packageA/cropper.vue @@ -7,10 +7,17 @@ @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" - :style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }" + :style="{ width: cropperOpt.width, height: cropperOpt.height }" canvas-id="cropper" id="cropper" > + { @@ -185,30 +175,139 @@ export default { }, getCropperImage(isPre = false) { if (!this.src) return this.$toast('请先选择图片再裁剪'); - + + // 如果是圆形裁剪，使用与 directCircleCrop 相同的方法 + if (this.circularCrop) { + // 使用最简单直接的方式裁剪 + const size = 300; + + // 1. 先使用weCropper获取矩形裁剪图片 + const options = { + destWidth: size, + destHeight: size, + fileType: 'png' + }; + + this.cropper.getCropperImage(options, (rectPath, err) => { + if (err) { + console.error('矩形裁剪失败:', err); + return; + } + + console.log('矩形裁剪成功，路径:', rectPath); + + // 2. 创建新画布进行圆形裁剪 + const ctx = uni.createCanvasContext('targetId'); + + // 先清空画布 + ctx.clearRect(0, 0, size, size); + + // 设置背景为透明 + ctx.setFillStyle('rgba(0,0,0,0)'); + ctx.fillRect(0, 0, size, size); + + // 创建圆形裁剪区域 + ctx.save(); + ctx.beginPath(); + ctx.arc(size/2, size/2, size/2, 0, 2 * Math.PI); + ctx.clip(); + + // 绘制图片到圆形区域 + ctx.drawImage(rectPath, 0, 0, size, size); + ctx.restore(); + + // 绘制并导出 + ctx.draw(false, () => { + setTimeout(() => { + uni.canvasToTempFilePath({ + canvasId: 'targetId', + x: 0, + y: 0, + width: size, + height: size, + destWidth: size, + destHeight: size, + fileType: 'png', + backgroundColor: 'transparent', + success: (res) => { + console.log('圆形裁剪成功:', res.tempFilePath); + if (isPre) { + uni.previewImage({ + urls: [res.tempFilePath] + }); + } else { + uni.$emit('uAvatarCropper', res.tempFilePath); + uni.navigateBack(); + } + }, + fail: (err) => { + console.error('圆形裁剪失败:', err); + // 失败时使用矩形图片 + if (isPre) { + uni.previewImage({ + urls: [rectPath] + }); + } else { + uni.$emit('uAvatarCropper', rectPath); + uni.navigateBack(); + } + } + }); + }, 300); + }); + }); + return; + } + + // 原始矩形裁剪方法 + this.useOriginalCrop(isPre); + }, + + // 使用原始裁剪方法 + useOriginalCrop(isPre = false) { + // 确保使用合适的尺寸 + const size = 300; // 增大尺寸 + let cropper_opt = { - destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值 - destWidth: Number(this.destWidth), + destHeight: size, + destWidth: size, fileType: this.fileType }; - this.cropper.getCropperImage(cropper_opt, (path, err) => { - if (err) { - uni.showModal({ - title: '温馨提示', - content: err.message - }); - } else { - if (isPre) { - uni.previewImage({ - current: '', // 当前显示图片的 http 链接 - urls: [path] // 需要预览的图片 http 链接列表 + + console.log('使用原始裁剪方法，参数:', cropper_opt); + + try { + this.cropper.getCropperImage(cropper_opt, (path, err) => { + console.log('裁剪回调被调用', path, err); + if (err) { + console.error('裁剪出错:', err); + uni.showModal({ + title: '温馨提示', + content: err.message }); } else { - uni.$emit('uAvatarCropper', path); - uni.navigateBack(); + console.log('裁剪成功，路径:', path); + + if (isPre) { + console.log('预览图片'); + uni.previewImage({ + current: '', // 当前显示图片的 http 链接 + urls: [path] // 需要预览的图片 http 链接列表 + }); + } else { + console.log('返回上一页'); + uni.$emit('uAvatarCropper', path); + uni.navigateBack(); + } } - } - }); + }); + } catch (error) { + console.error('调用 getCropperImage 出错:', error); + uni.showModal({ + title: '裁剪出错', + content: error.message || '未知错误' + }); + } }, uploadTap() { const self = this; @@ -223,7 +322,7 @@ export default { self.cropper.pushOrign(this.src); } }); - } + }, } }; @@ -241,6 +340,15 @@ export default { height: 100%; z-index: 11; } + +.cropper-circle-mask { + position: absolute; + border-radius: 50%; + box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35); + z-index: 12; + pointer-events: none; /* Allow touches to pass through to the canvas underneath */ + box-sizing: border-box; +} .cropper-buttons { background-color: #000000; @@ -270,8 +378,12 @@ export default { } .cropper-buttons .upload, -.cropper-buttons .getCropperImage { - width: 50%; +.cropper-buttons .getCropperImage, +.cropper-buttons .test, +.cropper-buttons .test2, +.cropper-buttons .test3, +.cropper-buttons .test4 { + width: 16.6%; text-align: center; } @@ -279,6 +391,22 @@ export default { text-align: left; padding-left: 50rpx; } + +.cropper-buttons .test { + color: #ffeb3b; +} + +.cropper-buttons .test2 { + color: #4caf50; +} + +.cropper-buttons .test3 { + color: #ff9800; +} + +.cropper-buttons .test4 { + color: #e91e63; +} .cropper-buttons .getCropperImage { text-align: right; diff --git a/packageA/my/exercise.vue b/packageA/my/exercise.vue index 3bc954f..04a69f5 100644 --- a/packageA/my/exercise.vue +++ b/packageA/my/exercise.vue @@ -18,7 +18,7 @@ {{ dateWeeks(item.detail.start_time) + '-'+dateWeekends(item.detail.end_time)}} - + diff --git a/packageA/my/orderList.vue b/packageA/my/orderList.vue index 1fd8f7a..38baa1e 100644 --- a/packageA/my/orderList.vue +++ b/packageA/my/orderList.vue @@ -32,8 +32,8 @@ - + v-for="(item, index) in hotList" :key="index" > + - + @@ -676,7 +676,7 @@ .shenhe { width: 94%; position: fixed; - top: 85rpx; + top: 75rpx; //background: #f7f7f7; background: #f7f7f7; z-index: 100; diff --git a/packageA/my/pendinPay.vue b/packageA/my/pendinPay.vue index 7d119ba..c63c389 100644 --- a/packageA/my/pendinPay.vue +++ b/packageA/my/pendinPay.vue @@ -856,7 +856,7 @@ width: 440rpx; height: 39rpx; font-family: PingFang SC, PingFang SC; - font-weight: 400; + font-weight: 600; font-size: 28rpx; color: #323232; // margin-left: 16rpx; diff --git a/packageA/my/pendinPayDetail.vue b/packageA/my/pendinPayDetail.vue index 3da0df7..6ccf061 100644 --- a/packageA/my/pendinPayDetail.vue +++ b/packageA/my/pendinPayDetail.vue @@ -101,1440 +101,1383 @@ v-if="detailAny.detail.feel == 0 && (detailAny.status == 9 || detailAny.status == 2 || detailAny.status == 3) && (detail.status==4|| detail.status==5)"> 申请售后 - - 取消订单 + 取消订单 - - 取消订单 + 取消订单 - - - + + - {{ detail.title }} - - ￥{{ detail.price }} - 公益 - - + 是否取消参与活动 + + 多次取消参与，会限制账号权限请谨慎操作 + - - - - {{ formattedTime.formattedTime }} (共计{{ formattedTimeList.length }}节) - - - - {{ detail.address_detail }} - - - - - 立 即 支 付 - 确 认 报 名 + + 关闭 + 确认取消 + 确认取消 - + - - - - 保 存 海 报 - - - - - - + \ No newline at end of file diff --git a/packageA/my/pendinPayStatus.vue b/packageA/my/pendinPayStatus.vue index efcdb59..6b7958e 100644 --- a/packageA/my/pendinPayStatus.vue +++ b/packageA/my/pendinPayStatus.vue @@ -9,7 +9,7 @@ - + @@ -167,7 +167,8 @@ background: '#ffffff00', titleStyle: { color: '#000000', - fontSize: '32rpx' + fontSize: '32rpx', + fontWeight: 'bold' }, status:null, toptitle: '', @@ -196,6 +197,11 @@ }, methods: { + openInfo(){ + uni.navigateTo({ + url: `/packageA/center/detail?id=${this.detail.activity_id}` + }) + }, //申请售后 service(id) { uni.navigateTo({ diff --git a/packageA/my/person-detail.vue b/packageA/my/person-detail.vue index 37a91f0..4c12e06 100644 --- a/packageA/my/person-detail.vue +++ b/packageA/my/person-detail.vue @@ -50,7 +50,7 @@ 未认证 + style="color: #9C9C9C;font-size: 26rpx;">未设置 已认证 diff --git a/packageA/my/stationDetail.vue b/packageA/my/stationDetail.vue index c67695d..7a77e3a 100644 --- a/packageA/my/stationDetail.vue +++ b/packageA/my/stationDetail.vue @@ -1,15 +1,17 @@ @@ -49,7 +51,7 @@ diff --git a/pages/activity/stationStemys.vue b/pages/activity/stationStemys.vue index b2edb9e..4e9b553 100644 --- a/pages/activity/stationStemys.vue +++ b/pages/activity/stationStemys.vue @@ -16,7 +16,7 @@ slot="center" @click="one" > - 系统消息 + 系统消息 - diff --git a/pages/my/applyOwner.vue b/pages/my/applyOwner.vue index f479361..622e469 100644 --- a/pages/my/applyOwner.vue +++ b/pages/my/applyOwner.vue @@ -3,7 +3,7 @@ + :titleStyle="{color:'#000000',fontSize:'34rpx',fontWeight:'bold'}"> diff --git a/utils/weCropper.js b/utils/weCropper.js index c98713d..9276a38 100644 --- a/utils/weCropper.js +++ b/utils/weCropper.js @@ -358,14 +358,25 @@ while (len-- > 0) args[len] = arguments[len + 1]; if (obj === void 0) obj = {}; + console.log('wxPromise 调用:', fn.name || '未知函数', '参数:', JSON.stringify(obj)); return new Promise(function(resolve, reject) { obj.success = function(res) { + console.log('wxPromise 成功:', fn.name || '未知函数', '结果:', res); resolve(res); }; obj.fail = function(err) { + console.error('wxPromise 失败:', fn.name || '未知函数', '错误:', err); reject(err); }; - fn.apply(void 0, [obj].concat(args)); + obj.complete = function() { + console.log('wxPromise 完成:', fn.name || '未知函数'); + }; + try { + fn.apply(void 0, [obj].concat(args)); + } catch (error) { + console.error('wxPromise 执行异常:', fn.name || '未知函数', '错误:', error); + reject(error); + } }) } } @@ -373,8 +384,27 @@ function draw(ctx, reserve) { if (reserve === void 0) reserve = false; - return new Promise(function(resolve) { - ctx.draw(reserve, resolve); + console.log('开始绘制 canvas'); + return new Promise(function(resolve, reject) { + try { + if (!ctx) { + console.error('绘制失败: ctx 为空'); + reject(new Error('绘制失败: ctx 为空')); + return; + } + + // 直接绘制，不使用延时，避免额外问题 + ctx.draw(reserve, function(res) { + console.log('绘制完成', res); + // 给一点时间让绘制完成 + setTimeout(function() { + resolve(res); + }, 200); + }); + } catch (error) { + console.error('绘制出错:', error); + reject(error); + } }) } @@ -420,7 +450,7 @@ // `decode` is designed to be fully compatible with `atob` as described in the // HTML Standard. http://whatwg.org/html/webappapis.html#dom-windowbase64-atob - // The optimized base64-decoding algorithm used is based on @atk’s excellent + // The optimized base64-decoding algorithm used is based on @atk's excellent // implementation. https://gist.github.com/atk/1020396 var decode = function(input) { input = String(input) @@ -907,15 +937,90 @@ fn = customOptions; } + // Check if circular crop is requested + var isCircular = customOptions && customOptions.shape === 'circle'; + + if (isCircular) { + // 使用更简单的方法实现圆形裁剪 + console.log('使用简化方法进行圆形裁剪'); + + // 先使用普通方式裁剪出矩形 + var rectOptions = Object.assign({}, canvasOptions); + + // 确保有正确的输出尺寸 + var destWidth = customOptions.destWidth || width; + var destHeight = customOptions.destHeight || height; + + // 先获取矩形裁剪的临时文件 + return canvasToTempFilePath.apply(null, [rectOptions]) + .then(function(res) { + console.log('矩形裁剪完成，开始圆形处理'); + var rectPath = res.tempFilePath; + + // 创建新的画布进行圆形裁剪 + var circleCanvas = self.targetCtx; + + // 清空画布 + circleCanvas.clearRect(0, 0, destWidth, destHeight); + + // 创建圆形路径 + circleCanvas.save(); + circleCanvas.beginPath(); + var centerX = destWidth / 2; + var centerY = destHeight / 2; + var radius = Math.min(destWidth, destHeight) / 2; + circleCanvas.arc(centerX, centerY, radius, 0, 2 * Math.PI); + circleCanvas.clip(); + + // 加载裁剪后的图片 + return getImageInfo({ src: rectPath }) + .then(function(imgInfo) { + console.log('加载裁剪图片信息:', imgInfo); + + // 绘制到圆形区域 + circleCanvas.drawImage( + rectPath, + 0, + 0, + imgInfo.width, + imgInfo.height, + 0, + 0, + destWidth, + destHeight + ); + + circleCanvas.restore(); + + // 绘制并导出 - 不再绘制边框 + return draw(circleCanvas) + .then(function() { + var circleOptions = { + canvasId: targetId, + x: 0, + y: 0, + width: destWidth, + height: destHeight, + destWidth: destWidth, + destHeight: destHeight, + fileType: customOptions.fileType || 'png' + }; + + return canvasToTempFilePath.apply(null, [circleOptions]); + }); + }); + }); + } + var arg = canvasOptions.componentContext ? [canvasOptions, canvasOptions.componentContext] : [canvasOptions]; - + return canvasToTempFilePath.apply(null, arg) }) .then(function(res) { var tempFilePath = res.tempFilePath; - + return tools_7(fn) ? fn.call(self, tempFilePath, null) : tempFilePath @@ -1120,89 +1225,120 @@ self.setBoundStyle = function(ref) { if (ref === void 0) ref = {}; var color = ref.color; - if (color === void 0) color = '#04b00f'; + if (color === void 0) color = '#ffffff'; var mask = ref.mask; - if (mask === void 0) mask = 'rgba(0, 0, 0, 0.3)'; + if (mask === void 0) mask = 'rgba(0, 0, 0, 0)'; var lineWidth = ref.lineWidth; if (lineWidth === void 0) lineWidth = 1; - + var isCircle = ref.isCircle; + if (isCircle === void 0) isCircle = true; // 默认使用圆形边框 + var half = lineWidth / 2; - var boundOption = [{ - start: { - x: x - half, - y: y + 10 - half - }, - step1: { - x: x - half, - y: y - half - }, - step2: { - x: x + 10 - half, - y: y - half - } - }, - { - start: { - x: x - half, - y: y + height - 10 + half - }, - step1: { - x: x - half, - y: y + height + half - }, - step2: { - x: x + 10 - half, - y: y + height + half - } - }, - { - start: { - x: x + width - 10 + half, - y: y - half - }, - step1: { - x: x + width + half, - y: y - half - }, - step2: { - x: x + width + half, - y: y + 10 - half - } - }, - { - start: { - x: x + width + half, - y: y + height - 10 + half - }, - step1: { - x: x + width + half, - y: y + height + half - }, - step2: { - x: x + width - 10 + half, - y: y + height + half - } - } - ]; - - // 绘制半透明层 - self.ctx.beginPath(); - self.ctx.setFillStyle(mask); - self.ctx.fillRect(0, 0, x, boundHeight); - self.ctx.fillRect(x, 0, width, y); - self.ctx.fillRect(x, y + height, width, boundHeight - y - height); - self.ctx.fillRect(x + width, 0, boundWidth - x - width, boundHeight); - self.ctx.fill(); - - boundOption.forEach(function(op) { + + // Check if we want a circular boundary instead of rectangular + if (isCircle) { + // Calculate center and radius + var centerX = x + width / 2; + var centerY = y + height / 2; + var radius = width / 2; // Assuming width = height for a circle + + // Draw the mask (everything outside the circle) self.ctx.beginPath(); + self.ctx.setFillStyle(mask); + // Draw a rectangle covering the entire canvas + self.ctx.fillRect(0, 0, boundWidth, boundHeight); + + // Create a circular hole in the mask + self.ctx.beginPath(); + self.ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI); + self.ctx.setFillStyle('transparent'); + self.ctx.fill(); + + // Draw the border circle + self.ctx.beginPath(); + self.ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI); self.ctx.setStrokeStyle(color); self.ctx.setLineWidth(lineWidth); - self.ctx.moveTo(op.start.x, op.start.y); - self.ctx.lineTo(op.step1.x, op.step1.y); - self.ctx.lineTo(op.step2.x, op.step2.y); self.ctx.stroke(); - }); + } else { + // Original rectangular boundary code + var boundOption = [{ + start: { + x: x - half, + y: y + 10 - half + }, + step1: { + x: x - half, + y: y - half + }, + step2: { + x: x + 10 - half, + y: y - half + } + }, + { + start: { + x: x - half, + y: y + height - 10 + half + }, + step1: { + x: x - half, + y: y + height + half + }, + step2: { + x: x + 10 - half, + y: y + height + half + } + }, + { + start: { + x: x + width - 10 + half, + y: y - half + }, + step1: { + x: x + width + half, + y: y - half + }, + step2: { + x: x + width + half, + y: y + 10 - half + } + }, + { + start: { + x: x + width + half, + y: y + height - 10 + half + }, + step1: { + x: x + width + half, + y: y + height + half + }, + step2: { + x: x + width - 10 + half, + y: y + height + half + } + } + ]; + + // 绘制半透明层 + self.ctx.beginPath(); + self.ctx.setFillStyle(mask); + self.ctx.fillRect(0, 0, x, boundHeight); + self.ctx.fillRect(x, 0, width, y); + self.ctx.fillRect(x, y + height, width, boundHeight - y - height); + self.ctx.fillRect(x + width, 0, boundWidth - x - width, boundHeight); + self.ctx.fill(); + + boundOption.forEach(function(op) { + self.ctx.beginPath(); + self.ctx.setStrokeStyle(color); + self.ctx.setLineWidth(lineWidth); + self.ctx.moveTo(op.start.x, op.start.y); + self.ctx.lineTo(op.step1.x, op.step1.y); + self.ctx.lineTo(op.step2.x, op.step2.y); + self.ctx.stroke(); + }); + } }; }