機(jī)械制圖國(guó)家標(biāo)準(zhǔn)的繪圖模板

The theme for week #5 of the Weekly Coding Challenge is:

每周編碼挑戰(zhàn)第5周的主題是：

創(chuàng)建繪圖應(yīng)用程序 (Creating a Drawing Application)

This is the first application that we are building in the #weeklyCodingChallenge program. So far we have built smaller projects, so this is pretty exciting if you ask me! ?

這是我們?cè)?weeklyCodingChallenge程序中構(gòu)建的第一個(gè)應(yīng)用程序。 到目前為止，我們已經(jīng)建立了較小的項(xiàng)目，因此如果您問(wèn)我，這將非常令人興奮！ ？

In this article we’ll use p5js, a drawing library, to build a Drawing Application:

在本文中，我們將使用繪圖庫(kù)p5js來(lái)構(gòu)建繪圖應(yīng)用程序 ：

Check out the CodePen here:

在此處查看CodePen：

If you want to learn more about p5js and what it does, you can visit their official website. Basically, I am using it because it works very well on top of the browser’s canvas element by providing a clear API.

如果您想了解更多有關(guān)p5js及其功能的信息，可以訪問(wèn)其官方網(wǎng)站 。 基本上，我使用它是因?yàn)樗ㄟ^(guò)提供一個(gè)清晰的API在瀏覽器的canvas元素上很好地工作。

HTML (The HTML)

As you can notice in the example above, on the left side of the screen we have a .sidebar. We'll put inside it our 'tools' - a color picker, a weight selector and the clear button (trashcan icon):

您可以在上面的示例中注意到，在屏幕的左側(cè)，我們有一個(gè).sidebar 。 我們將在其中放入“工具”-一個(gè)color選擇器，一個(gè)weight選擇器和一個(gè)clear按鈕(垃圾桶圖標(biāo))：

<div class="sidebar"><ul><li><label for="color">Color:</label><input type="color" id="color" /></li><li><label for="weight">Stroke:</label><input type="number" id="weight" min="2" max="200" value="3" /></li><li><button id="clear"><i class="fa fa-trash"></i></button></li></ul> </div>

CSS (The CSS)

Using CSS we’ll move the .sidebar and everything that’s inside it in the left side. We will style it a little bit to make it look nicer (nothing fancy, basic CSS):

使用CSS，我們將.sidebar及其內(nèi)部的所有內(nèi)容移到左側(cè)。 我們將對(duì)其進(jìn)行一些樣式設(shè)置，使其看起來(lái)更好(沒(méi)什么花哨的，基本CSS)：

.sidebar {background-color: #333;box-shadow: 0px 0px 10px rgba(30, 30, 30, 0.7);color: #fff;position: absolute;left: 0;top: 0;height: 100vh;padding: 5px;z-index: 1000; }.sidebar ul {display: flex;justify-content: center;align-items: flex-start;flex-direction: column;list-style-type: none;padding: 0;margin: 0;height: 100%; }.sidebar ul li {padding: 5px 0; }.sidebar input, .sidebar button {text-align: center;width: 45px; }.sidebar li:last-of-type {margin-top: auto; }.sidebar button {background-color: transparent;border: none;color: #fff;font-size: 20px; }.sidebar label {display: block;font-size: 12px;margin-bottom: 3px; }

Now for the important part…

現(xiàn)在重要的是……

JS / P5JS (The JS / P5JS)

As you might have noticed, we haven’t added a canvas element into our HTML since p5js will create it for us.

您可能已經(jīng)注意到，我們沒(méi)有在HTML中添加canvas元素，因?yàn)閜5js會(huì)為我們創(chuàng)建它。

There are two important functions which we’ll use from the p5js library:

我們將在p5js庫(kù)中使用兩個(gè)重要的函數(shù)：

• setup — is called once when the program starts. It’s used to define initial environment properties such as screen size and background color.

  設(shè)置 —在程序啟動(dòng)時(shí)被調(diào)用一次。 它用于定義初始環(huán)境屬性，例如屏幕尺寸和背景色。

• draw —is called directly after setup(). The draw() function continuously executes the lines of code contained inside its block.

  draw —在setup()之后直接調(diào)用。 draw()函數(shù)連續(xù)執(zhí)行其塊內(nèi)包含的代碼行。

function setup() {// create a canvas which is full width and heightcreateCanvas(window.innerWidth, window.innerHeight);// Add a white background to the canvasbackground(255); }function draw() {}

Before moving forward, let’s stop for a moment and see what we want to achieve.

在繼續(xù)前進(jìn)之前，讓我們先停下來(lái)看看我們要實(shí)現(xiàn)的目標(biāo)。

So, basically, we want to add a mousepressed eventListener to the canvas that will start 'drawing' a shape inside it as long as the mouseIsPressed.

所以，基本上，我們要添加一個(gè)mousepressed事件監(jiān)聽(tīng)到canvas ，將啟動(dòng)“繪制”里面的形狀，只要mouseIsPressed 。

We’ll create an array of points which we’re going to use to create a path (or a shape) using the beginShape and endShape methods to draw this shape inside the canvas. The shape is going to be constructed by connecting a series of vertices (see vertex for more information).

我們將使用BeginShape和endShape方法創(chuàng)建一個(gè)點(diǎn)數(shù)組，這些點(diǎn)將用于創(chuàng)建path (或形狀)以在畫(huà)布內(nèi)繪制該形狀。 將通過(guò)連接一系列頂點(diǎn)來(lái)構(gòu)造形狀(有關(guān)更多信息，請(qǐng)參見(jiàn)頂點(diǎn) )。

As we want this shape to be re-drawn every time, we’ll put this code inside the draw method:

由于我們希望每次都重新繪制此形狀，因此將這段代碼放入draw方法中：

const path = [];function draw() {// disabled filling geometry - p5js functionnoFill();if (mouseIsPressed) {// Store the location of the mouseconst point = {x: mouseX,y: mouseY};path.push(point);}beginShape();path.forEach(point => {// create a vertex at the specified locationvertex(point.x, point.y);});endShape(); }

As you can see, p5js has a mouseIsPressed flag that we can use to detect when the mouse buttons are pressed.

如您所見(jiàn)，p5js有一個(gè)mouseIsPressed標(biāo)志，我們可以用來(lái)檢測(cè)何時(shí)按下鼠標(biāo)按鈕。

Everything might look good so far, but there is a big issue. Once the mouse button is released and we try to draw another shape, the last point from the previous shape will be connected to the first point of the new shape. This is definitely not what we want, so we need to change our approach a little bit.

到目前為止，一切看起來(lái)都不錯(cuò)，但是有一個(gè)大問(wèn)題。 釋放鼠標(biāo)按鈕并嘗試?yán)L制其他形狀后，先前形狀的最后一個(gè)點(diǎn)將連接到新形狀的第一個(gè)點(diǎn)。 這絕對(duì)不是我們想要的，因此我們需要稍微改變一下方法。

Instead of having one array of points (the path array), we’ll create a pathsarray and we are going to store all the paths inside it. Basically, we’ll have a double array with points. Also, for this, we will need to keep track of the currentPath while the mouse is still pressed. We’ll reset this array once the mouse button is pressed again. Confusing? ? Let’s see the code and I bet that it will become clearer:

除了創(chuàng)建一個(gè)點(diǎn)數(shù)組(路徑數(shù)組)以外，我們將創(chuàng)建一個(gè)pathsarray ，并將所有paths存儲(chǔ)在其中。 基本上，我們將有一個(gè)帶有點(diǎn)的雙精度數(shù)組。 同樣，為此，我們將需要在仍然按下鼠標(biāo)的同時(shí)跟蹤currentPath 。 再次按下鼠標(biāo)按鈕后，我們將重置此數(shù)組。 令人困惑？ ？ 讓我們看一下代碼，我敢打賭它將變得更加清晰：

const paths = []; let currentPath = [];function draw() {noFill();if (mouseIsPressed) {const point = {x: mouseX,y: mouseY};// Adding the point to the `currentPath` arraycurrentPath.push(point);}// Looping over all the paths and drawing all the points inside thempaths.forEach(path => {beginShape();path.forEach(point => {stroke(point.color);strokeWeight(point.weight);vertex(point.x, point.y);});endShape();}); }// When the mouse is pressed, this even will fire function mousePressed() {// Clean up the currentPathcurrentPath = [];// Push the path inside the `paths` arraypaths.push(currentPath); }

I also added some comments in the code above, make sure you check them out.

我還在上面的代碼中添加了一些注釋，請(qǐng)確保將它們簽出。

The mousePressed function is called once after every time a mouse button is pressed — p5js stuff! ?

每次按下鼠標(biāo)按鈕時(shí)都會(huì)調(diào)用一次 mousePressed 函數(shù) -p5js的東西！ ？

Great! Now we can draw individual shapes in our canvas! ?

大！ 現(xiàn)在我們可以在畫(huà)布上繪制單個(gè)形狀了！ ？

The last thing to do is to hook up those buttons that we created in the HTML and use the values that are inside them to style the shape:

最后要做的是連接我們?cè)贖TML中創(chuàng)建的按鈕，并使用其中的值來(lái)設(shè)置形狀的樣式：

const colorInput = document.getElementById('color'); const weight = document.getElementById('weight'); const clear = document.getElementById('clear');function draw() {noFill();if (mouseIsPressed) {const point = {x: mouseX,y: mouseY,// storing the color and weights provided by the inputs for each pointcolor: colorInput.value,weight: weight.value};currentPath.push(point);}paths.forEach(path => {beginShape();path.forEach(point => {// using the color and the weight to style the strokestroke(point.color);strokeWeight(point.weight);vertex(point.x, point.y);});endShape();}); }clear.addEventListener('click', () => {// Remove all the pathspaths.splice(0);// Clear the backgroundbackground(255); });

And with this, we have finished our little application! Yay! ?

至此，我們完成了我們的小應(yīng)用程序！ 好極了！ ？

整個(gè)JS代碼 (The entire JS code)

const colorInput = document.getElementById('color'); const weight = document.getElementById('weight'); const clear = document.getElementById('clear'); const paths = []; let currentPath = [];function setup() {createCanvas(window.innerWidth, window.innerHeight);background(255); }function draw() {noFill();if (mouseIsPressed) {const point = {x: mouseX,y: mouseY,color: colorInput.value,weight: weight.value};currentPath.push(point);}paths.forEach(path => {beginShape();path.forEach(point => {stroke(point.color);strokeWeight(point.weight);vertex(point.x, point.y);});endShape();}); }function mousePressed() {currentPath = [];paths.push(currentPath); }clear.addEventListener('click', () => {paths.splice(0);background(255); });

Also, make sure that you import the p5js file in your html too before importing this js file.

另外，在導(dǎo)入此js文件之前，請(qǐng)確保p5js html中導(dǎo)入p5js文件。

結(jié)論 (Conclusion)

I hope that you liked this drawing app that we’ve built. There are a bunch of functionalities that could be added to this app and I challenge you to let your creative mind to come up with new ideas! ?

希望您喜歡我們構(gòu)建的此繪圖應(yīng)用程序。 有很多功能可以添加到此應(yīng)用程序中，我挑戰(zhàn)您讓您的創(chuàng)意思維提出新想法！ ？

What if you could save the drawing as an image (.png or .jpg)? ? (you can do this with the p5js library).

如果可以將圖形另存為圖像( .png或.jpg )怎么辦？ ？ (您可以使用p5js庫(kù)執(zhí)行此操作)。

As of now, we are only checking the mouse events. Maybe you could make it work on mobile, too, by figuring out the touch events? The sky is the limit with the amount of functionalities that could be added to this app!

截至目前，我們僅檢查mouse事件。 通過(guò)弄清touch事件，也許您也可以使其在移動(dòng)設(shè)備上工作？ 天空是可以添加到此應(yīng)用程序的功能數(shù)量的限制！

I’d love to see what you are going to build! Tweet me @florinpop1705 with your creation!

我很想看看你要建立什么！ 用您的創(chuàng)作給我@ florinpop1705發(fā)推文 ！

You might also like one of the other challenges from the Weekly Coding Challenge program. Check them out here.

您可能還會(huì)喜歡“每周編碼挑戰(zhàn)”計(jì)劃中的其他挑戰(zhàn)之一。 在這里查看它們。

See ya next time! Happy Coding! ?

下次見(jiàn)！ 編碼愉快！ ？

Originally published at www.florin-pop.com.

最初在www.florin-pop.com上發(fā)布。

翻譯自: https://www.freecodecamp.org/news/how-to-build-a-drawing-app-with-p5js-9b8d16e9364a/

機(jī)械制圖國(guó)家標(biāo)準(zhǔn)的繪圖模板

總結(jié)

以上是生活随笔為你收集整理的机械制图国家标准的绘图模板_如何使用p5js构建绘图应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。