<template>
<div id="main">
<a href="javascript:void(0)" @click="fuc_getPointInfo">getPointInfo</a>
<div id="canvasdrag"></div>
</div>
</template>
<script>
import createCanvasDrag from "alvin-canvasdrag";
export default {
name: "CanvasDrag",
data() {
return {
canvasdrag: "",
};
},
mounted() {
var cfg = {
operationPanel: "#canvasdrag",
defaultPointInfo: [58, 189, 440, 87, 475, 211, 92, 314],
};
this.canvasdrag = createCanvasDrag(cfg);
},
methods: {
fuc_getPointInfo() {
if (!this.canvasdrag) {
return false;
}
this.canvasdrag.getPointInfo();
},
},
};
</script>
<style lang="scss" scoped>
#canvasdrag {
width: 600px;
height: 400px;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="canvasDrag.min.js"></script>
<div id="operationPanel"></div>
$(targetID).canvasDrag({
operationPanel: "#operationPanel",
canvasWrapperClass: "canvasDragWrapper",
dragBgContentClass: "dragBgContent",
canvasEditerClass: "canvasEditer",
defaultPointInfo: 0,
dragBgSrc: "",
canvasWrapperBorder: "1px solid #ddd",
brushThickness: 3,
defaultLineColor: "#50a8e1",
errorLineColor: "red",
defaultRadiusColor: "#50a8e1",
errorRadiusColor: "red",
innerRadiusFillColor: "rgba(255,255,255,.5)",
vertexOuterRadius: 6,
vertexInnerRadius: 5,
midpointOuterRadius: 5,
midpointInnerRadius: 4,
mouseX: "#mouseX",
mouseY: "#mouseY"
});