yft-design

发表于2023-08-29|更新于2026-02-24

|浏览量:

与所爱的人长期相处的秘诀是：放弃改变对方的念头。——萨尔丹

分享一个项目yft-design

yft-design: 基于Canvas的开源版"创客贴"，使用 Vue3+ TypeScript + fabric.js + pinia + element-plus + pwa，支持文字、图片、形状、线条、二维码、条形码几种最常用的元素类型，每一种元素都拥有高度可编辑能力，缩略图显示，模板，支持导出json，svg, image文件

体验Demo：https://yft.design
体验Demo：https://more-strive.github.io/design/

相关推荐

精诚所加，金石为开。——《后汉书·光武十王列传》 https://remix.run/ https://github.com/remix-run/remix Remix：现代化的全栈 Web 框架随着 Web 开发技术的不断演进，开发者对框架的要求不仅局限于前端性能的优化，还包括后端数据处理、SEO 支持以及高效的开发体验。为了解决这些需求，Remix 应运而生。 Remix 是一个现代化的全栈 Web 框架，专注于提供最佳的开发者体验和用户体验。它以渐进增强的理念为核心，帮助开发者构建快速、可交互性强、并且易于扩展的 Web 应用。什么是 Remix？Remix 是一个开源的全栈 Web 框架，致力于优化应用的性能和开发体验。它允许开发者同时处理客户端和服务端逻辑，使得应用的交互性和性能达到最佳状态。 Remix 的核心优势包括：服务端渲染（SSR）：通过服务端渲染提高初次加载速度和 SEO 表现。渐进增强：支持现代浏览器功能，同时为低性能设备提供良好体验。路由驱动开发：基于文件系统的路由，让开发者专注于功能实现。数据加载优化：支持服务端数据加载和缓存机制，减...

elementUI字体文件丢失问题

见贤思齐焉，见不贤而内自省也。——《论语》今天引入elementUI时官方文档说的CDN引入方式为： CDN目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 1234<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/element-ui/lib/index.js"></script> 我想下载到本地嘛，就直接打开这两个链接，另存为到本地了然后发现字体文件丢失…最后解决方式是打开 https://unpkg.com/browse/element-ui@2.15.6/lib/theme-chalk/fonts/ 然后下载其中的字体文件...

tauri快速开始踩坑

现在我不那么困惑了，因为我幸运地变得比以前麻木了。——梭罗的《瓦尔登湖》这里我的Rust版本太低了，所以更新了下终端如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106(base) 2023:~ achao$ cd ~/IdeaProjects/(base) 2023:IdeaProjects achao$ sh <(curl https://create.tauri.app/sh) % Total % Received % Xferd Average Speed Time Time Time Current ...

用canvas消除锯齿的方式

不和不可以接物，不严不可以驭下。——林逋分享几种canvas消除锯齿的方式 1. 线条坐标增加0.5123456789<canvas id="canvas1" width="200" height="200"></canvas><script> var canvas = document.getElementById('canvas1'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(0, 0.5); // 使用0.5增量对齐像素 ctx.lineTo(200, 0.5); // 绘制一条边缘清晰的直线 ctx.stroke();</script> 2. 使用高清画布1234567891011<canvas id="canvas2" style="width:200px; height:200px...

任凭人群来往，任凭钟声响起，小孩啼哭——决心好好过上一天。——梭罗《瓦尔登湖》分享一个css属性mask： https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask https://css-tricks.com/almanac/properties/m/mask/ CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。这个属性很类似于background属性，但不同的是，background是背景在元素下层，mask是遮罩在元素上层，且mask不支持直接指定color，只支持image对象如图片、svg等同样两者都是组合属性，意味着可以用简写，而不是一个一个去指定 12mask-image: url(/img/oss/blog/vampireachao/bilibili-line.svg);mask-repeat: no-repeat; 可以简写为 1mask: url(/img/oss/blog/vampireachao/bilibili-line.svg) ...

vue-ueditor-wrap

会当凌绝顶，一览众山小。 —— 杜甫《望岳》 https://github.com/haochuan9421/vue-ueditor-wrap vue-ueditor-wrap：轻松集成 UEditor 到 Vue 项目在 Web 开发中，富文本编辑器是许多应用的重要组成部分，尤其是在博客系统、内容管理平台（CMS）等场景中。作为经典的富文本编辑器，UEditor 功能强大，但在现代前端框架（如 Vue）中使用时可能略显复杂。今天我们来介绍 vue-ueditor-wrap，一个基于 Vue 的封装组件，旨在让开发者轻松将 UEditor 集成到 Vue 项目中。什么是 vue-ueditor-wrap？vue-ueditor-wrap 是一个 UEditor 的 Vue 封装组件，提供了简洁的 API 和灵活的配置选项。它解决了原生 UEditor 在 Vue 项目中的集成难题，让开发者无需处理复杂的初始化逻辑。主要功能快速集成：通过简单的配置，即可将 UEditor 嵌入 Vue 项目。支持双向绑定：轻松实现 Vue 的 v-model 与 UEditor...

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中