話不多說直接上**
相容觸控和pc
放元件中可以直接使用。這裡注意外框要用百分比高度和寬度包裹上
="selectquyu"
>
:id=
"canvasid"
class
="huabu"
:width=
"width"
:height=
"height"
>
<
/canvas>
<
/div>
<
/template>
export
default
, dianyi2:
, dianyi3:
, dianyi4:,}
;},mounted()
, methods:
=this
;this
.isontouchend()
?//判斷是否支援觸屏
this
.touchesevent
(cxt, canelem,
[dianyi1,dianyi2,dianyi3,dianyi4]):
this
.mouseevent
(cxt, canelem,
[dianyi1, dianyi2, dianyi3, dianyi4]);
},0)
;},isontouchend()
,mouseevent
(cxt, element, dianyi)}if
(xuznzhong);}
};element.
onmouseup
=(e)
=>
element.onmousemove =
null
;this
.initcanvas
(cxt,
this
.width,
this
.height);}
;},touchesevent
(cxt, element, dianyi)}if
(xuznzhong);}
};element.
ontouchend
=(e)
=>
element.ontouchmove =
null
;this
.initcanvas
(cxt,
this
.width,
this
.height);}
;},initcanvas
(cxt, width, height)
=this
; cxt.
clearrect(0
,0, width, height)
;this
.linedow
(dianyi1, dianyi2, dianyi3, dianyi4, cxt)
;this
.dianyidow
(dianyi1.x, dianyi1.y, cxt, dianyi1.selectcolor)
;this
.dianyidow
(dianyi2.x, dianyi2.y, cxt, dianyi2.selectcolor)
;this
.dianyidow
(dianyi3.x, dianyi3.y, cxt, dianyi3.selectcolor)
;this
.dianyidow
(dianyi4.x, dianyi4.y, cxt, dianyi4.selectcolor);}
,dianyidow
(x, y, cxt, selectcolor)
,linedow
(dianyi1, dianyi2, dianyi3, dianyi4, cxt)
=this
;//畫線
cxt.
beginpath()
; cxt.
moveto
(dianyi1.x, dianyi1.y)
; cxt.
lineto
(dianyi2.x, dianyi2.y)
; cxt.
lineto
(dianyi4.x, dianyi4.y)
; cxt.
lineto
(dianyi3.x, dianyi3.y)
; cxt.linewidth =2;
cxt.strokestyle = color;
cxt.
closepath()
; cxt.fillstyle = areacolor;
cxt.
fill()
; cxt.
stroke()
;},isbox
(data, x, y, range =22)
else},
},};
<
/script>
vue 元件分區域顯示 vue地區選擇元件教程詳解
概述 主要用於全國地區資料的操作，包括省，市，區 聯動，地區資料的新增和刪除 在操作地區資料時，以前也用過樹形的地區選擇元件，但因其在再操作大量的地區資料時，渲染緩慢，所以我們就換了另一種資料展示形式和互動形式，從而就有了這個元件。注意 該元件是 vue.js 元件 demo 搶鮮體驗這裡 demo...
autojs之選擇指定區域
為了展示ocr的識別效果,要把識別的文字圈起來,並且顯示識別到的文字 載入乙個螢幕大小的懸浮窗 懸浮窗只有乙個canvas控制項 用canvas畫出資料 懸浮窗布局 var window floaty.rawwindow center board canvas frame 調整懸浮窗大小,充滿螢幕 ...
拖拽選擇區域日曆元件
最近做了乙個專案，其中有個需求是拖拽進行時間選擇，並能把相鄰時間進行合併顯示，仔細研究了一下，覺得有必要做一下記錄，因為這種元件好像並不多 實現效果如下 使用方式 1.安裝元件 npm install wkdatepick 或 yarn add wkdatepick2.引用 其中curdatelis...