前端开发利器--PxCook(像素大厨)

news2024/11/19 14:42:23

前端开发利器 - - PxCook(像素大厨)

  • 1、PxCook简述
  • 2、PxCook安装
  • 3、PxCook基本操作
    • 3.1 通过软件打开设计图
    • 3.2 常用快捷键
    • 3.3 常用工具
    • 3.4 从psd文件中直接获取数据


1、PxCook简述

前端开发软件:

  • PS(Photoshop)收费、占用磁盘空间大
  • PxCook本地免费,轻量,高效

PxCook

高效易用的自动标注工具, 生成前端代码, 设计研发协作利器

PxCook功能

  • 代码生成:包括 CSS, XML, Objective-C, Swift, ReactNative…
  • 自动标注:在开发模式下,可直接查看设计稿中元素的内容,间距,尺寸和样式等。同时会根据当前所选择的元素,在右侧属性栏中生成对应的样式代码。
  • 智能标注:支持智能标注出设计稿中,需要特殊注意的地方,以便加快工程师的开发效率。
  • 单位换算:支持 iOS, Android 和 H5 平台的不同单位类型和分辨率换算。
  • 切图协作:支持 iOS, Android 和 H5 三种平台的 切图协作 。导入到PxCook中的切图种类和命名,会根据当前的设备类型,自动进行换算。
  • 主流设计工具跨平台支持:支持 Photoshop,Sketch 和 Adobe XD 等设计工具,支持 macOS 和 Windows 两个操作系统。
  • 项目制管理设计稿:支持项目制管理您的设计稿中的每一个画板,同时支持对画板进行分组。
  • 协作项目的支持:支持云端协作项目,可以自由邀请项目的参与者到该项目中。
  • 本地项目的支持: 支持本地项目,所有项目数据可以以 pxcp 文件格式保存到本地,隐私保护更加有效。

2、PxCook安装

下载地址:PxCook - 高效易用的自动标注工具
在这里插入图片描述)

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


3、PxCook基本操作

3.1 通过软件打开设计图

打开软件

在这里插入图片描述
创建web项目

在这里插入图片描述
拖拽入设计图,png用设计模式 psd用开发模式

在这里插入图片描述

3.2 常用快捷键

放大设计图:ctrl + +

缩小设计图:ctrl - -

移动设计图:空格按住不放,鼠标拖动

3.3 常用工具

  1. 量尺寸
    在这里插入图片描述

  2. 吸颜色
    在这里插入图片描述

3.4 从psd文件中直接获取数据

切换到开发界面,直接点击获取数据

在这里插入图片描述


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409185.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【SVG】路径<Path>标签详解,一次搞懂所有命令参数

在上一篇文章 什么是SVG&#xff1f;——SVG快速入门 中我对SVG做了基础的介绍&#xff0c;这篇文章将集中讲解<path>标签 本站链接&#xff1a;什么是SVG&#xff1f;——SVG快速入门_gxyzlxf的博客-CSDN博客 稀土掘金链接&#xff1a;什么是SVG&#xff1f;——SVG快…

npm修改默认源(默认镜像)

1 npm修改默认源(默认镜像) 首先如果之前安装过node.js的需要先卸载&#xff0c;删除npm原始默认安装目录&#xff08;在cmd命令面板执行 npm config ls 查看npm默认路径&#xff09; 在cmd命令面板中输入npm config ls 查看npm默认路径 删除操作如下所示&#xff1a; 重新安…

js实现base64,url,blob之间的相互转换

一般来说前端展示图片会通过三种方式&#xff1a; url、base64、blob 1.url: 一般来说&#xff0c;图片的显示还是建议使用url的方式比较好。 let url "http://xxxxxx" 2.base64&#xff1a; 如果图片较大&#xff0c;图片的色彩层次比较丰富&#xff0c;则不适合…

【原创】基于JavaWeb的医院预约挂号系统(医院挂号管理系统毕业设计)

项目介绍&#xff1a;后端采用JspServlet。前端使用的是Layui的一个网站模板。开发一个在线的医院预约挂号系统。从角色的划分&#xff0c;包括用户、医生、管理员。功能模块上包括了公告发布、医院信息查看、医院医生信息查看、预约医生、病例记录、挂号审核、图表统计等模块。…

css常见居中方法总结

最近跟着网上的教程做了几个网页项目&#xff0c;做的过程中关于居中涉及到了好几种方法&#xff0c;遂想将其总结归纳下来&#xff0c;一是理清自己的思路&#xff0c;二是希望能分享给需要帮助的小伙伴们。 话不多数&#xff0c;直奔主题。 本次涉及到的居中方法有七种&…

微信小程序嵌入 H5 页面(web-view)

在开发微信小程序的时候&#xff0c;我们有时候会遇到将 H5 页面嵌入到小程序页面中的情况&#xff1b;微信小程序自带的 web-view 组件相当于 HTML 页面中的 iframe &#xff0c;方便我们在微信小程序中打开一个 H5 页面&#xff1b; 官网描述&#xff1a; 承载网页的容器&a…

微前端(无界)

前言&#xff1a;微前端已经是一个非常成熟的领域了&#xff0c;但开发者不管采用哪个现有方案&#xff0c;在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题&#xff0c;或无法提供支持。本…

vue项目中引入Luckysheet

Luckysheet 介绍 Luckysheet &#xff0c;一款纯前端类似excel的在线表格&#xff0c;功能强大、配置简单、完全开源。 实现功能 格式设置 样式 (修改字体样式&#xff0c;字号&#xff0c;颜色或者其他通用的样式)条件格式 (突出显示所关注的单元格或单元格区域&#xff1…

微信小程序(5)——如何制作好看的表格

✅ 因为 “表格” 在日常统计中无处不在&#xff0c;所以今天来做一做。但是微信小程序不支持 table 标签&#xff0c;我准备用 “上一篇——Flex布局” 学的 flex 来实现一下。 文章目录一、从“html的table”到 “微信小程序的table”二、统一格式的表格三、非统一格式的表格…

【vuex】unknown action type:home/categoryList报错

记录一下今天遇到的bug。在做项目时&#xff0c;想进行vuex模块化开发。 在src/store下暂且建了两个小仓库home和search src/store/index.js import {createStore} from vuex; // 引入小仓库 import home from /store/home/index import search from /store/search/index// 对…

vue3.0运行npm run dev 报错Cannot find module ‘node:url‘

目录 一、问题描述&#xff1a; 二、原因 三、解决方案 一、问题描述&#xff1a; 学习vue3.0&#xff08; Vue.js - 渐进式 JavaScript 框架 | Vue.js&#xff09;的时候一直使用的家里电脑&#xff0c;项目搭建运行一直没问题&#xff0c;公司近期用vue3.0写项目 npm init…

(前后端都开源)Activiti Flowable Camunda json转bpmn 仿钉钉流程设计器 vue2vue3 Ant Design Wflow-web smart-flow-design

仿钉钉流程设计器前后端源码 2022年10月17日,重磅开源! 话不多说上码云项目链接,各位觉得有帮助可以点一个star 本项目是基于这个Flowable6.7.2实现的, 后面会开一个Activiti567的分支 本项目在码云地址: Flowable-Activiti仿钉钉流程设计器前后台源码--工作流中台项目-基于…

第一次尝试制作一个钓鱼网站,小白教程,超细!

**声明&#xff1a;小白一枚&#xff0c;写下来为了记录和学习交流&#xff0c;大神不喜勿喷。 **大体思路&#xff1a;仿页面&#xff0c;社工诱导用户填写信息&#xff0c;提交传入后端&#xff0c;后端获取信息并存储&#xff0c;传回“服务器繁忙”或虚假信息并重定向到真…

js 各种时间格式的转换

js 各种时间格式的转换 时间格式示例中国标准时间Fri Mar 18 2022 14:24:45 GMT0800(中国标准时间)部分可读字符串Fri Mar 18 2022格林威治时间Fri,18 Mar 2022 06:24:45 GMT现在用的时间标准UTCFri Mar 18 2022 06:24:45 GMTIOS标准时间&#xff08;JSON时间格式&#xff09;…

Echarts常用配置项

一、常用配置项描述 title:{}//标题组件 tooltip:{},//提示框组件 yAxis:[],//y轴 xAxis:[],//x轴 legend:{},//图例组件 grid:{},//内绘网格 toolbox:{},//工具 series:[],//数据有关 calculable:true//可计…

JS高级中的constructor构造函数

1.对象原型__proto__和构造函数原型对象prototype里面都有一个constructor属性 2.constructor 称为构造函数 因为它的作用是用于new的实例对象指回构造函数本身 3.constructor 主要用于记录该对象是用于那个构造函数 它可以让原型对象prototype重新指向原来构造他的构造函数…

Vue|计算属性

1. 计算属性1.1 差值语法1.2 methods1.3 计算属性1. 计算属性 1.1 差值语法 开始前分别在项目目录创建文件夹及页面如下 需求1&#xff1a;在两个文本框中分别输入姓和名的同时需要在下方将数据进行拼接组装&#xff0c;效果如下图 如果用传统的方式来实现的话&#xff0c;需要…

vue2.x的h函数(createElement)与vue3中的h函数

1. vue2.x的 h 函数(createElement) 使用方法及介绍&#xff1a;&#xff08;参考官网提取&#xff09;h函数第一个是标签名字 或者是组件名字&#xff0c;第二个参数是配置项&#xff0c;第三个参数是 innerText &#xff0c;不会帮你转换节点&#xff0c;如果需要转换成节点…

background-size 之 背景图的尺寸设置

目录 一&#xff1a;background-size参数取值 1.0 1.1 二&#xff1a;实例分析 2.1 参数分析 2.2 代码实例分析 引&#xff1a;background-size: 没有设置任何尺寸时使用图片本身的大小&#xff0c;宽度和高度都是auto默认值 可以用px设置成具体的值&#xff0c;也可以使…

二、pytest+selenium+allure实现web ui自动化

上一章&#xff1a; 一、web ui自动化环境搭建 pytestallureselenium_傲娇的喵酱的博客-CSDN博客_pytestseleniumallure pytest二次开发相关文章&#xff1a; pytest框架二次开发之自定义注解_傲娇的喵酱的博客-CSDN博客 pytest框架二次开发之机器人报警_傲娇的喵酱的博客-…