Tim Blog

  房贷计算器是一种房贷计算的在线计算Web应用，按用户选择的贷款类型、贷款金额、期限、利率可计算得出每月月供参考、支付利息、还款总额这些信息。本文模仿新浪财经开发的房贷计算器。 作品预览 https://fangdai.gitapp.cn 源码地址 https://github.com/geeeeeeeek/fangdai 代码结构 整个项目代码分为css、js、image和index.html ，总的来说，代码结构比较简单，容易理解。主入口文件就是index.html，感兴趣的同学可以下载代码学习。 各种css和js文件通过link的方式引入，如下： < link rel = " icon " sizes = " 114x114 " href = " images/favicon.png " > < link rel = " stylesheet " type = " text/css " href = " /css/my-common.min.css " /> < link rel = " stylesheet " type = " text/css " href = " /css/my-houseloan.min.css " /> < script type = " text/javascript " src = " /js/zepto.min.js " async > </ script > < script type = " text/javascript " src = " /js/houseloan_calculator.js " async > </ script > < script src = " /js/common_tpl.js " type = " text/javascript " async > ...

  据 MSPoweruser 报道，Windows 11虽然刚刚开始步入正轨，但最新爆料称微软已经在开启下一个计划，Windows 12 的开发将在 去年3 月份开始。德国科技网站 Deskmodder.de 称，根据内部消息，微软将在 2022年3 月开始开发 Windows 12 系统，尽管 Windows 11 正式版才在去年 10 月份发布。即使 Windows 12 很快进入开发阶段，我们也可能要等待相当长的一段时间，才会迎来微软的官方宣布，毕竟一款系统的开发需要多年的时间。 个人体验 不得不说，windows的更新进度太快了，记得当年上大学的时候，大家用的还是windows xp，之后是windows 7，然后没有经历windows10，现在直接是windwos11。据说微软的系统版本有个特点，就是隔代胜出。比如win xp和win7之间的vista，还有win7和win10之间的win8，都失败了。不知道win12是否能成功。 以下就是win12的体验界面 w 体验地址： https://win12.gitapp.cn 本网页是基于第三方开源项目 https://github.com/tjy-gitnub/win12 开发的， 开发要点 整个项目的开发是基于html5+jquery+javascript+css实现的，目前实现的功能包括： 基本功能与应用 外观整体优化 加入特效 窗口功能 应用完善 添加更多个性化方面的设置 添加 Edge 应用 为更多应用添加标签页 完善小组件，添加到桌面等功能 动态壁纸 代码结构 该项目结构共分为9个文件夹和主入口文件desktop.html和boot.html。代码结构如下图所示。其中，scripts文件夹包含了所有的js文件，media文件夹包含了所有的音频文件，比如开机启动音乐；img文件夹包含了所有的静态图片。 关键代码 启动流程是先进入到boot.html，然后进入到desktop.html。 desktop.html关键代码如下： < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = ...

最近开发了一个图片编辑器，类似于photoshop的网页版，源码参考自GitHub上，顺便也总结下使用html+js开发一个编辑器需要用到哪些知识点。 预览地址：  https://ps.gitapp.cn github地址： https://github.com/photopea/photopea 架构设计 选型 ： jquery.js 和 blueimp-canvas.js都是强大的页面库，功能上类似，jquery.js比较新中文文档也多一些。Exif.js提供了 JavaScript读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO感光度、GPS 地理位置等数据。 要点 ： 本项目使用的是分功能模块开发的方式，将菜单、左区域、语言、配置，都放在了不同的文件中，比如菜单是config-menu.js，语言是languages文件夹，类库是libs文件夹，各种模块放到modules文件夹，核心库放到了core里面，各种小工具放到了tools里面。如果同学们想深入了解各区域代码，可以定位到相应的文件夹下面查看。 代码结构 整个项目的代码分为三个部分，分别是css、js、html。入口文件是js文件夹中的main.js，入口页面文件是index.html。如图所示： 首页介绍 首页将各种css、js文件引入，其中bundle.js是主渲染文件（使用npm打包命令打包后会生成bundle.js文件）。 < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < meta http-equiv = "x-ua-compatible" content = "IE=edge" /> < title > 在线PS </ title > < meta name = "description" content = "." /> < meta name = "keywords" ...

  您可能已经使用过一些在线 gif 生成器来快速生成 gif 图像，但这些在线生成器无法提供与 Photoshop网页版 相同的灵活性和结果。 gif 就像您可以在 Photoshop 中创建的迷你动画。**当你制作 gif 时，你正在创建图层的运动。**您可以从照片、矢量或从头开始制作动画 GIF。 在本教程中，我将向您展示如何在 Photoshop 中从头开始创建矢量 GIF。例如，我要制作一个圆形动画。同样的方法可以用来创建任何形状。 注意：屏幕截图取自 Adob​​e Photoshop CC Mac 版本。Windows 或其他版本可能看起来有所不同。 让我们开始步骤吧！ 第 1 步：创建一个新文档。选择RGB 颜色模式，因为 gif 是供数字使用的。您可以根据自己的喜好设置大小，但我建议您在图像背景中保留尽可能少的空白。 步骤2：使用椭圆工具 创建一个完美的圆形。您将看到 Photoshop 为圆圈创建了一个新的形状图层。 第3步：  复制图层，然后单击眼睛图标隐藏原始图层（椭圆1）。 第四步：从工具栏中选择钢笔工具 ，转到顶部菜单，然后选择 减去正面形状 。 使用钢笔工具在圆上画一个三角形，就像切蛋糕一样。 第5步：复制图层并隐藏其他图层。使用直接选择工具 通过拖动三角形角来使切口更大。 重复步骤 5，直到形成半圆。 第6步：转到顶部菜单“窗口”  >  “时间轴” 。时间线动画工作面板应该出现。 选择选项**“创建动画帧”**。单击该按钮，您将看到显示的可见图层。 **步骤7：**将时间更改为0.5秒，并选择永远重复选项。 **步骤 8：**单击“时间轴”面板上的加号图标添加新帧。 选择第一帧并打开第一层（ 红色圆圈 ）。选择第二帧并打开第二层（第一个三角形剪切），对所有帧重复此步骤。 _注意：一次只能打开一层。当到达半圆时，向后再次添加帧。 _ 单击播放按钮查看其外观并进行相应调整。如果您对结果感到满意，请转至顶部菜单**“文件”** >  “导出”  > **“另存为 Web（旧版）”**来保存 GIF。您应该看到这个窗口。 将预设更改为 GIF 选项，然后单击**“保存”**。现在您可以为其命名、选择保存位置以及格式等其他设置。 第 9 步 ：点击并 保存 ...

  你有没有想过“图像处理或图形设计看起来很酷，我要学习 Photoshop！” 然后你第一次打开 Photoshop ，并被你所看到的东西所震撼。 Photoshop 是一款功能强大的大型软件，您可以用它做很多事情。唯一的问题是学习曲线很大。好消息是，您可以通过大量免费和付费的在线资源来学习 Photoshop。 我是卡拉，现在我是一名摄影师。但在不久的过去，我不知道自己在 Photoshop 中做什么。我理解因为程序无法执行我想要的操作而感到沮丧。 跟我一起，我向您展示如何学习 Photoshop 并创建让您心动的内容类型！ # 第 1 步：弄清楚您想要从 Photoshop 中得到什么 Photoshop 是一个庞大的程序，具有很多功能。您需要弄清楚的第一件事是您想用它做什么。然后，您可以将注意力集中在学习您实际需要的软件子集上。 例如，作为一名摄影师，我从未接触过 Photoshop 中的大量工具。我不需要矢量、形状、路径以及软件中提供的许多其他工具。同样，如果您只对设计感兴趣，则可能不需要与照片相关的工具。 # 给摄影师的注意事项 顺便说一句，如果您是一名摄影师，只打算使用 Photoshop 进行照片编辑，我推荐 Lightroom。它也是由 Adob​​e 设计的，但专门用于照片编辑。 在我看来，它比 Photoshop 更加用户友好，并且学习起来更省时。 但是，如果您想进行照片处理，则需要 Photoshop。Lightroom 不允许您执行更高级的操作。例如，当某人闭着眼睛时，您无法剪切并粘贴部分图像以在全家福中进行头部交换。 最棒的是 Photoshop 和 Lightroom 作为 Adob​​e Creative Cloud 的捆绑包提供。您可以从 Lightroom 开始，然后轻松进入 Photoshop，因为您需要某些功能，并且该软件已经可供您使用。 # 第 2 步：学习基础知识 好吧，回到如何学习Photoshop。每个想要使用 Photoshop 的人都需要了解一些基本工具和技能。这些包括： # 工具箱 在屏幕的左侧，您可以找到Photoshop 提供的基本工具。其中包括强大的工具，如套索、克隆图章、修复画笔等等！ # 基本面板 这些面板可用于微调工具，例如画笔设置面板和照片调整面板（例如色相/饱和度调整等）。 # 层数 要在...