Shulou(Shulou.com)05/31 Report--

This article mainly introduces the "vue how to use js to click on the picture to mark dots and record its coordinates" related knowledge, editor through the actual case to show you the process of operation, the method of operation is simple and fast, practical, hope that this "vue how to use js to click on the picture to mark dots and record its coordinates" article can help you solve the problem.

Function

You can label the picture only after clicking the start tagging button.

Click the left button on a stand-alone machine in the picture area to add points.

Right-click on the dimension point to delete it, but right-click on the picture has no effect

After completing the annotation, click the finish marking button, end the annotation, and then click on the picture without adding any more points.

Before labeling

After dimensioning

Print record coordinate points

This coordinate depends on your own needs, whether it is relative to the percentage coordinates of the picture, or relative to the coordinates of the entire window, js can achieve.

Code implementation

Let me first talk about the js code for the implementation of key functions (it involves the data of date, so you need to take a look at all the code implementations below), followed by the whole code.

Determine whether the mouse right-clicks if (e.button! = = 2) / / determines whether the mouse right-clicks to prevent bubbling behavior and the default right-click menu event document.getElementById ('myBiaoZhu') .oncontextmenu= ((e) = > {if (e & & e.preventDefault) {/ / block the default browser action (W3C) e.preventDefault ()} else {/ / The way to block the default action of the function in IE window.event.returnValue = false} return false}) / / prevent the bubbling behavior and the default right menu event to click on the image document.getElementById ('myBiaoZhu') .onmousedown = (e) = > {e = e | window.event if (e.button! = = 2) {/ / determine whether it is right or not Click if (this.canBiaoZhu) {/ / to determine whether var x = e.offsetX | | e.layerX var y = e.offsetY | | e.layerY console.log (x) Y) var myImg = document.querySelector ("# myBiaoZhu") var currWidth = myImg.clientWidth var currHeight = myImg.clientHeight var ProportionWidthInImg = x/currWidth var ProportionHeightInImg = y/currHeight / / console.log ("picture scale height:" + ProportionHeightInImg) / / console.log ("picture scale width:" + ProportionWidthInImg) this.banMa .push ({id:this.banMa.length+1 CreateMarker (x) this.createMarker (x)} draw dots (x Y) {var div = document.createElement ('div') div.className =' marker' div.id = 'marker'+this.banMa.length y = y + document.getElementById (' myBiaoZhu'). OffsetTop-this.pointSize/2 x = x + document.getElementById ('myBiaoZhu'). OffsetLeft-this.pointSize/2 div.style.width = this.pointSize +' px' div.style.height = this.pointSize + 'px' div.style.backgroundColor = this .pointColor div.style.left = x + 'px' div.style.top = y +' px' div.oncontextmenu= ((e) = > {/ / prevent bubbling behavior and default right-click menu event At the same time, delete the point var id = e.target.id document.getElementById ('myBiaoZhuDiv') .removeChild (div) this.banMa = this.banMa.filter (item= > item.iddance = id.slice (6) Id.length)) if (e & & e.preventDefault) {/ / block the default browser action (W3C) e.preventDefault ()} the way to block the default action of the function in else {/ / IE window.event.returnValue = false} return false}) document.getElementById ('myBiaoZhuDiv') .appendChild (div)}

Html:

Start dimensioning and finish

Css:

# myBiaoZhuDiv {position:relative; img {border:solid 1px # 000; display:inline-block; margin:100px 100px; z-index: 1;} .position:absolute; border-radius: 50%; z-index: 999;}

Js:

Export default {name:', components: {}, data () {return {banMa: [], / / the array canBiaoZhu:false of the zebra crossing, / / whether the color pointSize:10 of the pointColor:'red', / / dot can be marked, / / the size of the dot}} Methods: {/ / start tagging startBiaoZhu () {this.canBiaoZhu = true}, / / finish tagging endBiaoZhu () {this.canBiaoZhu = false}, / / draw dot createMarker (x Y) {var div = document.createElement ('div') div.className =' marker' div.id = 'marker'+this.banMa.length y = y + document.getElementById (' myBiaoZhu'). OffsetTop-this.pointSize/2 x = x + document.getElementById ('myBiaoZhu'). OffsetLeft-this.pointSize/2 div.style.width = this.pointSize +' px' div.style.height = this. PointSize + 'px' div.style.backgroundColor = this.pointColor div.style.left = x +' px' div.style.top = y + 'px' div.oncontextmenu= ((e) = > {var id = e.target.id document.getElementById (' myBiaoZhuDiv'). RemoveChild (div) this.banMa = this.banMa.filter (item= > item. idling = id.slice (6) Id.length)) if (e & & e.preventDefault) {/ / block the default browser action (W3C) e.preventDefault ()} else {/ / IE the way to block the default action of the function window.event.returnValue = false} return false}) / / prevent the risk Bubble behavior and default right-click menu event Delete the point document.getElementById ('myBiaoZhuDiv') .appendChild (div)},}, watch: {}, computed: {}, created () {} Mounted () {document.getElementById ('myBiaoZhu'). Oncontextmenu= ((e) = > {if (e & & e.preventDefault) {/ / block the default browser action (W3C) e.preventDefault ()} else {/ / IE the way to block the default action of the functor window.event.returnValue = false} return False}) / / prevent bubbling behavior and default right-click menu event document.getElementById ('myBiaoZhu') .onmousedown = (e) = > {e = e | | window.event if (e.button! = = 2) {/ / determine whether to right-click if (this.canBiaoZhu) {/ / to determine whether it is possible to label var x = e.offsetX | | e .layerX var y = e.offsetY | | e.layerY console.log (x Y) var myImg = document.querySelector ("# myBiaoZhu") var currWidth = myImg.clientWidth var currHeight = myImg.clientHeight var ProportionWidthInImg = x/currWidth var ProportionHeightInImg = y/currHeight / / console.log ("picture scale height:" + ProportionHeightInImg) / / console.log ("picture scale width:" + ProportionWidthInImg) this.banMa .push ({id:this.banMa.length+1 BeforeDestroy () {}, destroyed () {},} about "how vue uses js to click on a picture to mark a dot and record its coordinates". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.