初学react实现路由跳转

by Avanthika Meenakshi

通过Avanthika Meenakshi

如何使用React构建模因制作者：初学者指南 (How to build a meme-maker with React: a beginner’s guide)

If you’re in the middle of learning React, you have probably already been through lots of tutorials on how to build a to-do list. At some point, you’ll look for alternate ideas to try and learn but you’ll keep bumping into different versions of the default to-do list example.

如果您在学习React的过程中，可能已经通过了很多有关如何构建待办事项列表的教程。 在某个时候，您将寻找可替代的想法尝试并学习，但是您将不断碰到默认待办事项列表示例的不同版本。

This alternate idea in this article is for you, the curious ones. The codebase can be found in my GitHub and it is bootstrapped from create-react-app. I’ve collected meme-templates from google and other sources. The Impact font can make any image a meme, so we’ve got no choice but to add it.

本文中的另一种想法是给您的，好奇的。 该代码库可以在我的GitHub上找到，并从create-react-app引导。 我已经从Google和其他来源收集了模因模板。 Impact字体可以使任何图像成为模因，因此我们只能添加它。

This is a good do-and-learn-project to start with. We will be dealing with many event listeners/user interactions and state mutations.

首先，这是一个很好的学习型项目。 我们将处理许多事件侦听器/用户交互和状态突变。

建立画廊 (Building the gallery)

Initially, we will be building an image gallery to allow the users to select a meme-template. I’ve stored the images I have collected as an array, and I’m building a simple gallery out of it.

最初，我们将建立一个图片库，以允许用户选择一个模因模板。 我将收集的图像存储为数组，并以此构建一个简单的图库。

In the following code,

在以下代码中，

1. We map through the photos array, show each meme-template in a img tag, and display a gallery.
   我们通过photos数组进行映射，在img标签中显示每个meme模板，并显示一个图库。

2. We determine the current selected image through an onClick on the img tag.

   我们通过img标签上的onClick确定当前选择的图像。

3. We have a initialState object with initial settings of the captions and their positioning. The position, content and drag-status of the top and bottom texts can be later modified by triggering state mutations.
   我们有一个initialState对象，该标题带有字幕的初始设置及其位置。 稍后可以通过触发状态突变来修改顶部和底部文本的位置，内容和拖动状态。

As you can decipher, every image in the gallery has got its own onClick event. It finds the currently selected image, converts it to data URI and opens up a reactstrap modal. The modal is going to be the work-station for creating the meme.

如您所知，图库中的每个图像都有自己的onClick事件。 它找到当前选择的图像，将其转换为数据URI并打开reactstrap modal 。 该模态将成为创建模因的工作站。

Meme-Maker工作站 (The Meme-Maker workstation)

We use svg, image and text tags inside the modal to hold the image and the meme-caption. We prefer SVG because you can zoom in and out as much as you like, and it will never lose clarity. And converting SVG to PNG while exporting the meme is relatively simple task.

我们在模态中使用svg ， image和text标签来保存图像和模因标题。 我们之所以喜欢SVG，是因为您可以根据需要随意放大和缩小，并且它永远不会失去清晰度。 在导出模因的同时将SVG转换为PNG是相对简单的任务。

Each image in the collection has got different height and width. To avoid stretching and compressing the image, I’m doing a little workaround to fix the aspect ratio. I’m fixing the width to 600, and calculating the height based on the width-height ratio. I’m supplying the calculated height and width to the SVG.

集合中的每个图像都有不同的高度和宽度。 为了避免拉伸和压缩图像，我在做一些变通办法来固定纵横比。 我将宽度固定为600，然后根据宽高比计算高度。 我正在将计算出的高度和宽度提供给SVG。

The overall structure inside the SVG is pretty straightforward. It holds the image and the captions.

SVG内部的整体结构非常简单。 它包含图像和标题。

<svg width={newWidth} height={newHeight} ...otherAttributes&gt;  <image xlinkHref="image-path" />  <text x="top-x-position" y="top-y-position">    {this.state.toptext}  </text>  <text x="bottom-x-position" y="bottom-y-position">    {this.state.bottomtext}  </text>  // And we will have event listeners attached to the <text /> tags to move them around. We'll see it in later part of the article.</svg>

The x and y coordinates of the top and bottom<text /> tags are maintained in the state (refer to the initialState object in the MemeMaker component). As the user drags and positions the text tags, the X and Y coordinates change.

顶部和底部<text />标记的x和y坐标保持在状态中(请参阅MemeMaker组件中的initialState对象)。 当用户拖动和放置文本标签时，X和Y坐标会更改。

Note: The image tag’s xlinkHref will be embedded(base64) path. Raw src URLs cannot be converted to PNGs while downloading.

注意： 图像标签的xlinkHref将被嵌入(base64)路径。 下载时，原始src URL不能转换为PNG。

Here’s how the whole code looks like:

整个代码如下所示：

Other than the SVG, we have two <input />; tags to allow the user to input their top and bottom captions for the meme. The onChange event captures the top-caption and bottom-caption, and sets them in the state as and when we change it.

除了SVG，我们还有两个<input /> ; 标签允许用户输入模因的顶部和底部标题。 on Change事件捕获顶部字幕和底部字幕，并在更改时将它们设置为状态。

拖动文字！ (Dragging the text around!)

Let’s try re-positioning the top and bottom captions now. The drag and drop interactions of the text tags are tied to event listeners.

让我们现在尝试重新放置顶部和底部字幕。 文本标签的拖放交互与事件侦听器相关。

1. Mouse press —onMouseDown — Finds the selected text tag, determines current X and Y positions, and attaches “mousemove” event listener to it.

   按下鼠标— onMouseDown —查找选定的文本标签，确定当前的X和Y位置，并将“ mousemove”事件侦听器附加到该文本标签。

2. Mouse move — onMouseMove — Finds the current position(x and y) of the text tag as the mouse is held and moved.

   鼠标移动— onMouseMove —在按住和移动鼠标时查找文本标签的当前位置(x和y)。

3. Mouse release — onMouseUp — Finds the drop position or release position. Determines the X and Y where text is dropped. Removes the “mousemove” event listener from the element and terminates drag and drop.

   鼠标释放— onMouseUp —查找放置位置或释放位置。 确定放置文本的X和Y。 从元素中删除“ mousemove”事件侦听器并终止拖放。

To track mouse press, hold and drag. We include the following event listeners to the text tags.

要跟踪鼠标按下，按住并拖动。 我们在文本标签中包含以下事件侦听器。

onMouseDown={event => this.handleMouseDown(event, ‘top’)}onMouseUp={event => this.handleMouseUp(event, ‘top’)}

We then attach the “mousemove” event listener to track mouse movements on “mousedown”. Once the text tag is dropped, we remove the attached mouse move event listener in “mouseup”.

然后，我们附加“ mousemove”事件侦听器，以跟踪“ mousedown”上的鼠标移动。 删除文本标签后，我们将在“ mouseup”中删除附加的鼠标移动事件监听器。

Here’s how the code does that:

代码是这样的：

Now that the drag and drop is done, you can move your text around and re-position it where-ever you want.

现在完成了拖放操作，您可以在任意位置移动文本并将其重新放置。

下载模因 (Downloading the meme)

When a user clicks the download button, we are converting the SVG to an XML serialised string and drawing it in an HTML5 canvas. We use toDataUrl() method of html canvas (generates a base64 image URI) to generate an “image/png” mime-type image!

当用户单击下载按钮时，我们会将SVG转换为XML序列化的字符串，并将其绘制在HTML5 canvas中 。 我们使用html canvas的toDataUrl()方法(生成base64图像URI)来生成“ image / png” mime类型的图像！

As you learn more, there’s much more you can do to this little project.

随着学习的增加，您可以对这个小项目做更多的事情。

1. You can try to fetch images from open source APIs and build a gallery.
   您可以尝试从开源API获取图像并建立一个库。
2. You can try to add provisions to share them in facebook, whatsapp and twitter.
   您可以尝试添加条款以在Facebook，whatsapp和Twitter中共享它们。
3. You can try to allow the user to upload their own image, scale it and create a meme.
   您可以尝试允许用户上传自己的图像，缩放图像并创建模因。
4. You can try font resizing.
   您可以尝试调整字体大小。

There’s much more you can do to improve the project that’ll ultimately improve your coding skills. ? Happy coding! ?

您可以做更多的事情来改善项目，从而最终提高您的编码技能。 ？ 编码愉快！ ？

翻译自: https://www.freecodecamp.org/news/react-for-beginners-building-a-meme-maker-with-react-7164d3d3e55f/

初学react实现路由跳转