前端canvas项目实战——简历制作网站(一)——左侧工具栏

这篇具有很好参考价值的文章主要介绍了前端canvas项目实战——简历制作网站(一)——左侧工具栏。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

fabric基础系列博文中,我们通过代码向画布canvas中添加矩形、圆形等对象。对于用户,我们不能指望他们可以理解代码,甚至编写代码去制作他的简历。你也许使用过PhotoShop或其他的绘图软件,这些软件中都是让用户点击各种图标来向画布中绘制对应的对象的。没有使用过也没关系,下文中有效果的预览图,也会教你一步一步实现它。

这篇博文是《前端canvas项目实战——简历制作网站》付费专栏系列博文的第一篇——左侧工具栏,主要的内容有:

  1. 实现工具栏,使用户可以通过点击鼠标在画布中添加想要的对象。

一、效果展示

  • 动手体验
    CodeSandbox会自动对代码的进行编译,并提供地址以供体验代码效果
    由于CSDN的链接跳转有问题,会导致页面无法工作,请复制以下链接在浏览器打开:
    https://wvclr3.csb.app/

  • 动态效果演示

前端canvas项目实战——简历制作网站(一)——左侧工具栏,React从入门到精通,前端,html5,react,fabric,canvas
  • 本节之后,我们的简历能做成什么样子
前端canvas项目实战——简历制作网站(一)——左侧工具栏,React从入门到精通,前端,html5,react,fabric,canvas

二、实现步骤

在前面的博文HTML5画布框架fabricjs学习笔记(三)——自定义选择控制框样式中,我们通过fabric.Object.prototype.xxx = ...;的方式按照自己的喜好,对选择框的控制点样式做了一些定制化的修改。这篇博文的内容开始前,我们先对代码结构进行一点优化,避免canvas-page.js文件里写太多代码,不便于维护。

1. 拆分旧代码,优化项目结构

首先,我们把上述的代码拆分到一个wrap-object.js文件中,其含义即对fabric.Object类进行封装。

import { fabric } from "fabric";
import shortUUID from "short-uuid";
import rotateControlIcon from "../images/rotate.svg";

fabric.Object.prototype.noScaleCache = false;

// 修改控制点的样式
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.cornerColor = "white";
fabric.Object.prototype.borderColor = "dodgerblue";
fabric.Object.prototype.cornerStrokeColor = "gray";
fabric.Object.prototype.cornerSize = 8;
fabric.Object.prototype.cornerStyle = "circle";
fabric.Object.prototype.strokeUniform = true;
fabric.Object.prototype.padding = 10;

/**
 * 覆盖fabric.Object的initialize方法,为对象添加id属性
 * @type {function(...[*]): fabric.Object.initialize}
 */
fabric.Object.prototype.initialize = (function (fn) {
  return function (...args) {
    fn.call(this, ...args);
    let { id } = args;
    id ||= shortUUID().new();
    this.set("id", id);
    this.objectCaching = false;
    return this;
  };
})(fabric.Object.prototype.initialize);

const renderIcon = (image, initialAngle) => {
  let imageIcon = document.createElement("img");
  imageIcon.src = image;
  return function (ctx, left, top, styleOverride, fabricObject) {
    let size = this.cornerSize;
    ctx.save();
    ctx.translate(left, top);
    ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle + initialAngle));
    ctx.drawImage(imageIcon, -size / 2, -size / 2, size, size);
    ctx.restore();
  };
};

/**
 * 修改旋转控制按钮的样式
 * @type {Control}
 */
fabric.Object.prototype.controls.mtr = new fabric.Control({
  x: 0,
  y: -0.5,
  offsetY: -20,
  cursorStyle: "pointer",
  actionName: "rotate",
  actionHandler: fabric.controlsUtils.rotationWithSnapping,
  cursorStyleHandler: fabric.controlsUtils.rotationStyleHandler,
  withConnection: false,
  render: renderIcon(rotateControlIcon, 0),
  cornerSize: 20
});

显而易见,这里一共三部分:

  • 修改选择框线、控制点等的样式
  • 覆盖fabric.Objectinitialize方法,为对象添加id属性
  • 覆盖mtr中间顶部旋转控制点的样式

2. 左侧工具栏

左侧工具栏用于用户点击后,在画布中创建出其想要的基础图形。初步,我们先实现最基础的四种对象:矩形圆形直线文字输入框
这里创建一个left-side-tools.js,代码如下:

import "./index.css";
import squareIcon from "../../images/square.svg";
import circleIcon from "../../images/circle.svg";
import lineIcon from "../../images/line.svg";
import textIcon from "../../images/typeface.svg";
import { handleClickTool } from "./logics";

const Tool = (props) => {
  let { icon, handleClick } = props;
  return (
    <div className="left-side-tool" onClick={handleClick}>
      <img className="left-side-tool-icon" src={icon} alt="Icon of tool" />
    </div>
  );
};

const LeftSideTools = (props) => {
  let { canvas } = props;
  return (
    <div className="left-side-tools-container">
      <Tool icon={squareIcon} handleClick={(e) => handleClickTool(e, 0, canvas)} />
      <Tool icon={circleIcon} handleClick={(e) => handleClickTool(e, 1, canvas)} />
      <Tool icon={lineIcon} handleClick={(e) => handleClickTool(e, 2, canvas)} />
      <Tool icon={textIcon} handleClick={(e) => handleClickTool(e, 3, canvas)} />
    </div>
  );
};

export default LeftSideTools;

UI部分的实现比较简单,就是在页面左侧绘制四个icon,点击后调用handleClickTool方法去分别向画布中创建对应的对象。

为了提高UI和JS逻辑的维护性,handleClickTool放在同目录下的另一个文件logics.js中,其代码如下:

import { fabric } from "fabric";

const handleClickTool = (e, func, canvas) => {
  if (!canvas) {
    return;
  }
  let newFabricObject;
  switch (func) {
    case 0:
      newFabricObject = new fabric.Rect();
      break;
    case 1:
      newFabricObject = new fabric.Circle();
      break;
    case 2:
      newFabricObject = new fabric.Line();
      break;
    case 3:
      newFabricObject = new fabric.Textbox();
      break;
    default:
      throw RangeError(`Func ${func} not implemented!`);
  }
  if (newFabricObject) {
    canvas.add(newFabricObject);
    canvas.renderAll();
    canvas.setActiveObject(newFabricObject);
    canvas.renderAll();
  }
  e.stopPropagation();
  e.preventDefault();
};

export { handleClickTool };

其代码逻辑可大致分为3个部分:
1) 根据用户点击的不同icon传递过来的func创建不同对象的实例
2) 将上述实例通过canvas.add方法绘制到画布中
3) 避免click事件向父标签传播

3. 组合代码

在新的canvas-page.js中,我们将上述的代码“组装”,实现本节所要达到的功能,其代码如下:

import "./index.css";
import "../wrap-fabric/wrap-object";
import "../wrap-fabric/wrap-rect";
import "../wrap-fabric/wrap-circle";
import "../wrap-fabric/wrap-line";
import "../wrap-fabric/wrap-text";
import { fabric } from "fabric";
import React, { useEffect, useState } from "react";
import LeftSideTools from "./left-side-tools";

const CanvasPage = (props) => {
  const [canvas, setCanvas] = useState(null);

  useEffect(() => {
    let canvas = new fabric.Canvas("canvas");
    setCanvas(canvas);
  }, []);

  return (
    <div className="content-container">
      <LeftSideTools canvas={canvas} />
      <canvas id="canvas" width="794px" height="1123px" />
    </div>
  );
};

export default CanvasPage;

这里有几点需要解释说明:
1) 我们通过#content-container将刚刚实现的左侧工具栏LeftSideTools和画布canvas横向并排置于屏幕中
2) 画布的大小设为width="794px" height="1123px",这是1倍屏幕分辨率A4纸大小210mm x 297mm计算得到的像素值大小,具体的计算公式我们在晚些的博文中再谈
3) 我们在本节开头提到的wrap-object.js通过import ../wrap-object引入了进来,这样的代码拆分可以使UI和JS逻辑更便于阅读和维护


三、Show u the code

由于篇幅所限,尽数列出所有代码改动会导致博文冗长难读。本节完整的代码托管在CodeSandbox中,点击前往,查看完整代码


后记

本节之后,我们可以用现有的功能将简历做成什么样子,我将图片贴到了博文开头,为了读者可以快速理解通过这节的代码我们可以实现什么效果。

点击左侧工具栏,不同的对象会被绘制在画布左上角,我们通过拖拽、按下并拖拽9个控制点来改变该对象的位置旋转角度这几个属性,以此实现上述“简历”的样式。

目前我们在页面上还不能改变对象的其他样式,如边框颜色填充颜色等。下一节,我们通过右侧属性栏来实现这些需求。文章来源地址https://www.toymoban.com/news/detail-804543.html

到了这里,关于前端canvas项目实战——简历制作网站(一)——左侧工具栏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 手机网站建设怎么做?【手机网站制作】

    对于很多公司企业来说,做网站建设都是优先考虑 PC 端的网站建设,但是某些公司企业可能对于 PC 端网站的需求不高,倒是更有需要做移动端网站,也就是我们常说的手机网站。那么关于手机网站建设又是怎么做的呢?本文给大家做一个分享。 一、域名注册和解析 做手机网

    2024年02月11日
    浏览(82)
  • 制作一个简单HTML校园网页(HTML+CSS)学校网站制作 校园网站设计与实现

    🎉精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作

    2024年01月16日
    浏览(53)
  • 旅游网站制作流程

    旅游网站制作流程是一个较复杂的过程,因为它需要结合市场调研、用户需求、内容构建、技术开发等多个方面。在这篇文章中,我将简单介绍一下旅游网站的制作流程,大致分为以下步骤。 第一步:市场调研 在制作旅游网站前,我们需要先对市场进行调研,了解用户的需

    2024年04月27日
    浏览(40)
  • django练手(四):制作网站的导航栏

    一.准备工作 下载Bootstrap。网站的前端样式我采用的是Bootstrap v3。Bootstrap的网址是https://www.bootcss.com/。Bootstrap V3运行依赖Jquery,也需要安装Jquery。我使用的Jquery版本是Jquery-3.7.1。 文件夹规划。 规划内容如下: ①. 在app下新建static文件夹,存放静态文件。 ②.在static下新建css,j

    2024年02月04日
    浏览(63)
  • 企业网站制作如何被百度收录

    1、网站在百度中的整体评分 说俗点就是网站的权重,在优化过程中我们会见到很多网站出现秒收的情况,发布的文章几分钟就可以收录,这个通过SITE语法都可以去查询,那么这跟自己的网站权重以及内容更新习惯是有非常重要的关联。 我们要学会给百度蜘蛛养成习惯,每天

    2024年04月22日
    浏览(48)
  • 基于github制作个人学术网站(主页)

    首先找到一个学术模板,fork到远程仓库。academicpages,如果不是很清楚具体的步骤,可以参考保姆级教程。在github上对该网站代码修改不是很方便,肯定是在本地进行更新后push到远程仓库。 学会下载和安装就行,一路默认,可以先学习一下Git相关的原理及基础操作,可以参考

    2024年02月15日
    浏览(57)
  • django练手系列(四):制作网站的导航栏

    一.准备工作 下载Bootstrap。网站的前端样式我采用的是Bootstrap v3。Bootstrap的网址是https://www.bootcss.com/。Bootstrap V3运行依赖Jquery,也需要安装Jquery。我使用的Jquery版本是Jquery-3.7.1。 文件夹规划。 规划内容如下: ①. 在app下新建static文件夹,存放静态文件。 ②.在static下新建css,j

    2024年02月04日
    浏览(56)
  • KSWeb使用旧手机制作网站服务器

    首先我们需要下载ksweb这款app,这是一位俄罗斯大神制作的,里面集成了Lighttpd、nginx、Apache的服务器,还有mysql服务器等,十分强大 下载链接:xl2.ydyspc.com/kswebv3.986pjb_xlhs.com.apk 打开软件后应该是这样子的 然后我用的是lighttpd服务器,点击主机下面那串文字,我们可以自己选一

    2024年02月11日
    浏览(60)
  • 第一次尝试制作一个钓鱼网站,小白教程,超细!

    **声明:小白一枚,写下来为了记录和学习交流,大神不喜勿喷。 **大体思路:仿页面,社工诱导用户填写信息,提交传入后端,后端获取信息并存储,传回“服务器繁忙”或虚假信息并重定向到真实网站。 目录 一、前端界面制作 (一) 表单提交的两种姿势 1、按钮实现 2、标

    2024年02月02日
    浏览(57)
  • 旅游网站制作搭建,为旅行业务带来新机遇

    旅游业在全球范围内一直都是蓬勃发展的行业之一。随着互联网的普及以及人们对旅行需求的增加,拥有一个精美而功能强大的旅游网站已经成为了旅行从业者的必备条件。本文旨在简单介绍旅游网站是什么,旅游网站的好处,并提供一些快速制作搭建旅游网站的方法。 旅游

    2024年02月12日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包