登录注册

Painter

14 引用 • 31 回帖 • 404 浏览

参与讨论

关注

关注分享

变形

2 引用 • 7 回帖
多选

1 引用 • 2 回帖
开源

Open Source, Open Mind, Open Sight, Open Future!
407 引用 • 3578 回帖
拖拽

2 引用 • 1 回帖
SVG

24 引用 • 73 回帖

默认热议好评优选最近回帖关注者查看所有标签

绘画板 13——变形 (下)
github 地址： [链接] DEMO 地址： [链接] 变形变形这部分代码比较多，所以分为上下两部分。在(上)中已经实现了左侧中间点的变形操作。但是一共有 8 个操作点，为了避免混乱，抽离 handle.border.listener.js 提供 8 个点的变形方法。 y 轴移动之前左侧中间点的操作可以视为 x ..

227 8 年前
绘画板 12——变形 (上)
github 地址： [链接] DEMO 地址： [链接] 变形既然实现了拖拽效果，就可以在此基础上，实现另一个效果：变形。 HandlerBorder 在实现变形效果之前，先讲解一下 HandlerBorder。这是在 pick 时，选中元素后，在元素周围出现的 4 个黑框。现在将其扩展为 8 个黑框，拖拽黑框， ..

462 8 年前
绘画板 11——拖拽
github 地址： [链接] DEMO 地址： [链接] 拖拽使用 svgjs 官方推荐的拖拽插件 [链接] 实现元素的拖拽效果暴露了 4 种事件监听 beforedrag dragstart dragmove (you can call preventDefault on this one) dragend 可 ..

326 8 年前
绘画板 10——多选元素
github 地址： [链接] DEMO 地址： [链接] 多选元素原理在选择按钮状态下，可以绘制一个曲线矩形，遍历所有元素判断，如果当前元素在矩形的坐标范围内，则元素被选中。矩形四个点的坐标范围为 x,x+width,y,y+height 变更 element click 事件选择元素时，需要触发元素选中事件 ..

291 8 年前
绘画板 09——自定义右键菜单
github 地址： [链接] DEMO 地址： [链接] 自定义右键菜单使用开源的 jquery 插件 [链接] 实现自定义右键菜单的效果。插件内容比较简单，方便进行二次开发和定制。插件的设计思路主要是基于 jquery，监听 contextmenu 事件，并 append 自定义的 div 菜单列表。新增 ..

334 8 年前
绘画板 08——删除与清屏
github 地址： [链接] DEMO 地址： [链接] 删除 GlobalStatus 增加 isRecycle()方法，用来判断删除按钮是否被点击 isRecycle: function(){ return $('#tool_delete').hasClass('active'); }, 在 Element 扩展 ..

368 8 年前
绘画板 07——图层移动
github 地址： [链接] DEMO 地址： [链接] 图层移动 svgjs 提供了图层移动的方法，实现方式如下 , forward: function() { var i = this.position() + 1 , p = this.parent() // move node one step forward ..

236 8 年前
绘画板 06——铅笔与自定义鼠标图标
github 地址： [链接] DEMO 地址： [链接] 自定义鼠标图标可以通过 css 设置 cursor 的方式指定鼠标图标样式 | default | 默认光标（通常是一个箭头） | | auto | 默认。浏览器设置的光标。 | | crosshair | 光标呈现为十字线。 | | pointer | 光 ..

401 8 年前
绘画板 05——设置图形边框颜色与背景色（喷枪）
github 地址： [链接] DEMO 地址： [链接] 边框与背景色首先，使用了开源的 [链接] 作为颜色选择器，之前以 SVG 对象保存全局方法与对象，现在通过新定义一个 GlobalStatus，存在全局属性，并通过按钮状态判断状态 var GlobalStatus = { defaultFontColor ..

301 8 年前
绘画板 04——增加操作框（矩阵变化）
github 地址： [链接] DEMO 地址： [链接] 针对元素进行操作时，如果采用更改边框颜色的形式，会和修改边框冲突。所以采用增加 4 个操作边框的形式，既能表示元素被选中，又能在后续增加拖拽，变形等操作。增加了一个 HandleBorder 类，并扩展其 prototype 属性对象，增加方法 create ..

225 8 年前
绘画板 03——选中元素
github 地址： [链接] DEMO 地址： [链接] 为了针对某个元素进行操作，增加了一个选中操作的按钮。点击此按钮后，鼠标变为手指选择，滑动到元素上方时，元素特殊显示，单击后即为选中状态。首先，增加一个全局的状态位，判断选择按钮是否被选中 SVG.isPicked = function(){ return $ ..

237 8 年前
绘画板 02——抽象并实现图形绘制功能
github 地址： https://github.com/wangyuheng/painter DEMO 地址： http://painter.crick.wang/ 针对上个版本的基础代码进行抽象和封装将所有的图形绘制工具，都“继承”一个 DrawTool 工具类，在此工具类中绑定、解绑事件，代码如下 (func ..

746 8 年前
绘画板 01——实现绘制矩形功能
svgjs 本身提供了绘制图形的函数。为了实现鼠标点击、绘制的功能，需要监听鼠标事件 mousedown 修改绘画状态位，开始画图 mousemove 修改图形大小，绘制图形 mouseup 修改绘画状态位，结束画图拓展了一个函数，获取鼠标点击时相对画布左上角的相对坐标根据 svgjs 提供的函数，将图形的透明度 ..

284 8 年前
绘画板 00——为什么用 svg
提到画图，现在的首选印象可能是 canvas，但在技术选型上，为什么选择了 svg 而弃用 Canvas？ svg 为矢量图，Canvas 基于像素，依赖分辨率 Canvas 发生变化时，整个场景都会重新绘制 svg 以 dom 形式，方便进行数据传递与通信（结构过度复杂可能会导致性能下降） svg 支持事件处理器 ..

286 8 年前