{"version":3,"sources":["webpack:///./src/views/canvas.vue?cb7d","webpack:///src/views/canvas.vue","webpack:///./src/views/canvas.vue?bd52","webpack:///./src/views/canvas.vue","webpack:///./src/views/canvas.vue?1f86"],"names":["render","_vm","this","_h","$createElement","_self","_c","_m","staticRenderFns","attrs","staticClass","_v","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAsBH,EAAII,MAAMC,GAAO,OAAOL,EAAIM,GAAG,IACnGC,EAAkB,CAAC,WAAa,IAAIP,EAAIC,KAASC,EAAGF,EAAIG,eAAmBE,EAAGL,EAAII,MAAMC,IAAIH,EAAG,OAAOG,EAAG,MAAM,CAACA,EAAG,SAAS,CAACG,MAAM,CAAC,GAAK,WAAW,MAAQ,MAAM,OAAS,SAASH,EAAG,MAAM,CAACA,EAAG,MAAM,CAACI,YAAY,QAAQ,CAACJ,EAAG,MAAM,CAACI,YAAY,YAAY,CAACJ,EAAG,MAAM,CAACI,YAAY,MAAMD,MAAM,CAAC,GAAK,OAAO,UAAY,SAAS,CAACR,EAAIU,GAAG,SAASL,EAAG,MAAM,CAACI,YAAY,YAAY,CAACJ,EAAG,MAAM,CAACI,YAAY,aAAaD,MAAM,CAAC,GAAK,OAAO,UAAY,SAAS,CAACR,EAAIU,GAAG,iBCwB/c,G,UAAA,CACE,KAAF,aACE,QAFF,WAGI,KAAJ,eACI,KAAJ,WAEE,QAAF,CACI,aADJ,WAEM,IAAN,sCAEM,GADA,QAAN,OACA,aAAM,CACA,IAAN,qBAQM,EAAN,iBACM,EAAN,kBACM,EAAN,sBAMM,EAAN,YACM,EAAN,gBACM,EAAN,SAQM,EAAN,YACM,EAAN,0BACM,EAAN,qBACM,EAAN,SAOM,EAAN,sBACM,EAAN,gCACM,EAAN,gBACM,EAAN,iCAGI,QA/CJ,WAwEM,IAAN,yCACA,8CACM,QAAN,SACM,EAAN,qBACQ,EAAR,wBACU,IAAV,kBACU,QAAV,YACU,EAAV,yCACU,EAAV,sCAGM,EAAN,uBACQ,EAAR,wBACU,IAAV,kBACU,EAAV,iBACU,EAAV,+BACU,QAAV,eAEQ,EAAR,uBACU,IAAV,kBAEU,EAAV,kCAEU,EAAV,iBACU,EAAV,gCAEQ,EAAR,uBACU,QAAV,iBAGQ,EAAR,mBACU,QAAV,UACU,IAAV,kBACA,iCACU,EAAV,+CACU,EAAV,8CC1IgV,I,wBCQ5UC,EAAY,eACd,EACAZ,EACAQ,GACA,EACA,KACA,WACA,MAIa,aAAAI,E,6CCnBf,yBAAmiB,EAAG,G","file":"js/chunk-520ce526.237d1fcecdf41aa83e56.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _vm._m(0)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('canvas',{attrs:{\"id\":\"myCanvas\",\"width\":\"400\",\"height\":\"200\"}}),_c('div',[_c('div',{staticClass:\"flex\"},[_c('div',{staticClass:\"box-wrap\"},[_c('div',{staticClass:\"box\",attrs:{\"id\":\"box1\",\"draggable\":\"true\"}},[_vm._v(\"1\")])]),_c('div',{staticClass:\"box-wrap\"},[_c('div',{staticClass:\"box target\",attrs:{\"id\":\"box2\",\"draggable\":\"true\"}},[_vm._v(\"2\")])])])])])}]\n\nexport { render, staticRenderFns }","<template>\r\n    <div>\r\n        <canvas id=\"myCanvas\" width=\"400\" height=\"200\"></canvas>\r\n        <div>\r\n            <div class=\"flex\">\r\n                <!-- <div class=\"box-wrap\">\r\n                    <div class=\"box\" id=\"source\" draggable=\"true\"></div>\r\n                </div>\r\n                <div  class=\"box-wrap\" id=\"target\">\r\n                    <div class=\"box\"></div>\r\n                </div> -->\r\n                <div class=\"box-wrap\">\r\n                    <div class=\"box\" id=\"box1\" draggable=\"true\">1</div>\r\n                </div>\r\n                 <div class=\"box-wrap\">\r\n                    <div class=\"box target\" id=\"box2\" draggable=\"true\">2</div>\r\n                </div>\r\n                \r\n            </div>\r\n            \r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    name: 'canvasDemo',\r\n    mounted () {\r\n        this.createCanvas()\r\n        this.dragFun()\r\n    },\r\n    methods: {\r\n        createCanvas () {\r\n            let c = document.getElementById(\"myCanvas\");\r\n            console.log(c)\r\n            if (!c.getContext) return;\r\n            let cxt = c.getContext(\"2d\");\r\n\r\n            /*  画矩形\r\n                fillStyle 默认设置是#000000（黑色）\r\n                fillRect(x,y,width,height) 方法定义了矩形当前的填充方式（x,y表示起始坐标）\r\n                strokeRect(x, y, width, height)：绘制一个矩形的边框。\r\n                clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。\r\n            */\r\n            cxt.fillStyle=\"#ccc\";\r\n            cxt.strokeStyle =\"red\";\r\n            cxt.fillRect(0,0,400,200);\r\n\r\n            /*  画线\r\n                moveTo(x,y) 定义线条开始坐标\r\n                lineTo(x,y) 定义线条结束坐标\r\n            */\r\n            cxt.moveTo(0,0);\r\n            cxt.lineTo(200,100);\r\n            cxt.stroke();\r\n\r\n            /*  画圆\r\n                arc(x, y, r, startAngle, endAngle, anticlockwise)\r\n                以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。\r\n                anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。\r\n                arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。\r\n            */\r\n            cxt.beginPath(); //新建一条path\r\n            cxt.arc(95,50,40,0,2*Math.PI);\r\n            cxt.strokeStyle =\"yellow\";\r\n            cxt.stroke();\r\n\r\n            /*  文本\r\n                font - 定义字体\r\n                fillText(text,x,y) - 在 canvas 上绘制实心的文本\r\n                strokeText(text,x,y) - 在 canvas 上绘制空心的文本\r\n            */\r\n            cxt.font=\"30px Arial red\";\r\n            cxt.strokeText(\"Hello World\",10,50);\r\n            cxt.fillStyle = 'red'\r\n            cxt.fillText(\"Hello World\",10,100);\r\n            \r\n        },\r\n        dragFun () {\r\n            // var source = document.getElementById('source');\r\n            // var target = document.getElementById('target');\r\n            // source.ondragstart = function(event){\r\n            //     var e = event || window.event\r\n            //     console.log('开始拖拽');\r\n            //     e.dataTransfer.setData('text',e.target.id);\r\n            // }\r\n            // target.ondragenter = function(){\r\n            //     console.log('进入目标元素')\r\n            // }\r\n            // target.ondragover = function(e){\r\n            //     var event = e || window.event;\r\n            //     console.log('在目标元素中拖拽');\r\n            //     event.preventDefault()\r\n            // }\r\n            // target.ondragleave = function(){\r\n            //     console.log('拖放离开目标元素')\r\n            // }\r\n            // target.ondrop = function(event){\r\n            //     console.log('拖放');\r\n            //     var e = event || window.event\r\n            //     var data = e.dataTransfer.getData('text');\r\n            //     e.target.appendChild(document.getElementById(data));\r\n            // }\r\n            var dragboxs = document.getElementsByClassName('box')\r\n            var targetWrap = document.getElementsByClassName('box-wrap')\r\n            console.log(dragboxs, targetWrap)\r\n            dragboxs.forEach(element => {\r\n                element.ondragstart = function(event){\r\n                    var e = event || window.event\r\n                    console.log('开始拖拽');\r\n                    e.dataTransfer.setData('text',e.target.id);\r\n                    e.dataTransfer.effectAllowed = \"copy\"\r\n                }\r\n            });\r\n            targetWrap.forEach((element, idx) => {\r\n                element.ondragenter = function(event){\r\n                    var e = event || window.event\r\n                    e.preventDefault()\r\n                    e.dataTransfer.dropEffect = \"copy\"\r\n                    console.log('进入目标元素')\r\n                }\r\n                element.ondragover = function(e){\r\n                    var event = e || window.event;\r\n                    // console.log('在目标元素中拖拽1',  targetWrap[idx]);\r\n                    targetWrap[idx].style.border = \"1px dashed #ccc\"\r\n                    // console.log('在目标元素中拖拽2',  targetWrap[idx]);\r\n                    event.preventDefault()\r\n                    event.dataTransfer.dropEffect = \"copy\"\r\n                }\r\n                element.ondragleave = function(){\r\n                    console.log('拖放离开目标元素')\r\n                    // targetWrap[idx].style.border = \"1px solid royalblue\"\r\n                }\r\n                element.ondrop = function(event){\r\n                    console.log('拖放');\r\n                    var e = event || window.event\r\n                    var data = e.dataTransfer.getData('text');\r\n                    e.target.appendChild(document.getElementById(data));\r\n                    targetWrap[idx].style.border = \"1px solid royalblue\"\r\n                }\r\n            });\r\n\r\n        }\r\n    }\r\n    \r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.box {\r\n    \r\n    width: 200px;\r\n    height: 200px;\r\n    background-color: aquamarine;\r\n}\r\n.box-wrap {\r\n    width: 200px;\r\n    height: 200px;\r\n    margin-right: 100px;\r\n    border: 1px solid royalblue;\r\n}\r\n.target {\r\n    background-color: rosybrown;\r\n}\r\n</style>","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./canvas.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./canvas.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./canvas.vue?vue&type=template&id=587c4126&scoped=true&\"\nimport script from \"./canvas.vue?vue&type=script&lang=js&\"\nexport * from \"./canvas.vue?vue&type=script&lang=js&\"\nimport style0 from \"./canvas.vue?vue&type=style&index=0&id=587c4126&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"587c4126\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./canvas.vue?vue&type=style&index=0&id=587c4126&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./canvas.vue?vue&type=style&index=0&id=587c4126&lang=scss&scoped=true&\""],"sourceRoot":""}