• How to draw a perfect mouse track


    motivation At a company meeting, I make complaints about the effect of a mouse track in a product. You can see that its implementation is tomousemoveThe coordinates when the event is triggered are connected by rectangles with different lengths and widths, so there is an obvious “fracture” at the connection, the whole track is not […]

  • The scratch effect is so simple


    1. The core API of scraping (eraser) effect ctx.globalCompositeOperation = type; Sets the type of compositing operation to apply when drawing a new shape.The type we need to use here isdestination-outDetails of this property:MDN document 2. Basic version scratch function Canvs overlay on picture <style>     body {       margin: 0;     }     img {       width: 400px;       height: 300px;       left: 200px;       position: absolute;       z-index: -1;     } […]

  • JQuery source code series (XIV) custom events


    WelcomeMy columnView a series of articles. Previously, I only knew that the click event would start only when clicking on the elements in the browser. Other events are the same, requiring manual mouse operation. Later, with the deepening of learning, I learned that JS can write functions to control the execution of events, so it […]

  • Vue development window Resize anti shake operation


    Problem phenomenon description Primary treatment (useless) window.addEventListener(“resize”, () => { setTimeout(() => { //Code block to execute },500) }); Just set a setTimeout in it. As a result, the frequency of image flashing is reduced, but it still flashes Conventional treatment (anti shake) [1.] write a debounce anti shake function first debounce(fn, delay) { let […]

  • [jQuery] principle and initial code of rotation chart


    JQuery rotation chart <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .carousel-box{ width: 670px; height: 240px; position: relative; margin: 0 auto; } .carousel-box img{ width: 670px; height: 240px; position: absolute; top: 0px; left: 0px; } .carousel-box ul{ position: absolute; left: 50%; margin-left: -78px; bottom: […]

  • Draw arbitrary polygons and measure the area in the visual scene


    The general measurement function is mainly reflected in two aspects: one is to measure distance, the other is to measure area. Area measurement is to calculate the actual area size through the transformation of geographical coordinate system according to the range drawn by the mouse. Distance measurement is to calculate the actual distance between two […]

  • Right click to create a new menu. The text document cannot be found. How to create a new Notepad


    Recently, many netizens have encountered that the right mouse button can’t find the text document in the new menu bar, that is, the right mouse button can’t create a notepad. This situation is mostly related to our registry. Today, Xiaobian brings you the solution that the right mouse button can’t find the text document and […]

  • Draw any line segment in the visual scene and measure the distance


    In the digital twin visualization scene, we may encounter this problem, that is, we need to measure the distance between different targets in the digital twin visualization scene. Through this measurement, we can clearly know the location of each target in the visualization scene and the distance between each target, so as to make reasonable […]

  • Share a Windows artifact cmder


    The function of this cmder is to enable the CMD of your window system to use commands like Linux, VIM, etc,Look at this big brother’s tutorial, it’s easy After installation, you can right-click anywhere to see this   Then we can use it like Linux. Those who are interested can play it     PS: […]

  • HTML5 local crop picture


    Effect drawing first: We first need to create aindex.htmlFile with some simplehtmlandcsscode: <!DOCTYPE html> <html> <head> <title>HTML5 Crop Image</title> </head> <style type=”text/css”> body{text-align:center;} #label{border:1px solid #ccc;background-color:#fff;text-align:center;height:300px; width:300px;margin:20px auto;position:relative;} #get_image{position:absolute;} #edit_pic{position:absolute;display:none;background:#000;} #cover_box{position: absolute;z-index: 9999;display:none;top:0px;left:0px;} #show_edit{margin: 0 auto;display:inline-block;} #show_pic{height:100px;width:100px;border:2px solid #000;overflow:hidden;margin:0 auto;display:inline-block; } </style> <body> <input type=”file” name=”file” id=”post_file”> <button id=”save_button”>SAVE</button> <div id=”label”> <canvas id=”get_image”></canvas> <p> <canvas […]

  • Understanding of jQuery design ideas


    Transferred from: Ruan Yifeng July 26, 2011 http://www.ruanyifeng.com/blo… jQueryIt is currently the most widely used JavaScript function library. According to statistics, 46% of the top 1 million websites in the world use jQuery, far more than other libraries. Microsoft even takes jQuery as their official library. It is necessary for web developers to learn jQuery. […]

  • Angularjs learning notes – event instructions


    ngClick Applicable labels: allTrigger condition: Click #html <div ng-controller=”LearnCtrl”> <div ng-click=”click()”>click me</div> <button ng-click=”click()”>click me</button> </div> #script angular.module(‘learnModule’, []) .controller(‘LearnCtrl’, function ($scope) { $scope.click = function () { alert(‘click’); } }); ngDblclick Applicable labels: allTrigger condition: double click #html <div ng-controller=”LearnCtrl”> <div ng-dblclick=”dblclick()”>click me</div> <button ng-dblclick=”dblclick()”>click me</button> </div> #script angular.module(‘learnModule’, []) .controller(‘LearnCtrl’, function ($scope) { […]