Tag:control point

  • Draw your own DAG job dependency diagram from scratch (III) — simple version of node connection


    summary After the hierarchical layout is completed, the relative position of the nodes on each layer is basically determined. Our simplest way is to tile all nodes on each layer, with fixed width and spacing of nodes, and the position of each node is basically determined. We just need to connect based on these nodes. […]

  • Vue drag horizontal progress bar component


    We need a progress bar that can be dragged and can set the maximum, minimum and step size, so we asked Du Niang, referred to the progress bar code written by many netizens, and finally came up with this progress bar component, which can be used on both PC and mobile terminals. Code: <template> <div […]

  • React realizes 9 control points of div scaling, rotation and dragging


    During this time, the element drag control implemented by a canvas library is very good. So I use js + div to implement one. Use the react framework to practice. thinking Add 8 control points to the four edges and four corners of the controlled element. When dragging a control point, judge the dragging direction […]

  • In order to let her learn to draw – stay up late and realize a drawing board with canvas


    preface Hello everyone, I’m fly. Canvas is really a powerful thing. I can’t extricate myself from indulging in this every day. I can play games and deal with pictures. I’ll share an article later. Canvas realizes two pictures to find different functions. Does it sound very interesting and a bit like a gameLooking for your […]

  • 33.qt quick pathview to achieve a good-looking home interface


    The use of pathview is similar to that of listview, which requires a model and a delegate,It’s just that pathview has a path attribute. As the name suggests, the path is the sliding path of item A path can be composed of the following multiple path segments (before)Explain pathanimation(mentioned during): PathLine :A line path specified […]

  • 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 […]

  • Canvas generates smooth curves from multiple points


    <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Demo smooth connection</title> </head> <body> <canvas id=”canvas”></canvas> <style> html { position: relative; height: 100%; width: 100%; } body { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0; } canvas { outline: 1px solid red; } </style> <script> const getDistance = (p1, p2) => { […]

  • Use canvas to realize a big balloon for you


    1、 Background Recently, I’m making a special effect demand for balloon pendant. At this opportunity, I’d like to share with you how to use canvas and corresponding mathematical knowledge to construct a lifelike balloon. 2、 Realize Before implementing this seemingly round balloon, first understand its implementation ideas, which are mainly divided into the following parts: […]

  • Analysis of n-order Bezier curve with JavaScript


    Recently, I learned canvas and saw Bezier curve, so I added some knowledge. In addition, I forgot all the related mathematical laws~ What we need to know Early need to understand the relevant knowledge, you can see Wikipedia What is a Bezier curve? What is linear interpolation? draw Canvas itself only provides quadratic and cubic […]

  • Kotlin wave animation


    Learn kotlin and rearrange some of the previous knowledge First of all, for the operation that needs a lot of drawing, you can’t draw directly   Surfaceview can directly put the drawing work into the sub thread for operation. Otherwise, the drawing work will get stuck when it is increased. However, surfaceview is an independent […]

  • Front end small project: painting Doraemon with canvas


    Recently, when learning canvas elements, < canvas > tags are just graphic containers, and you must use js to draw graphics. In order to enhance the understanding of canvas elements, we draw a Doraemon with canvas Rendering to be realized Online preview In order to draw this Doraemon, we must first master the following functions: […]

  • Drawing a curve animation with canvas


    My GitHub blog address https://github.com/hujiulong/… preface In front-end development, Bessel curve is everywhere: It can be used to draw curves. In SVG and canvas, Bezier curve is used in the original curve drawing It can also be used to describe a slow motion algorithm to set thetransition-timing-functionProperty, Bezier curve can be used to describe the […]