wuba / picasso Goto Github PK
View Code? Open in Web Editor NEW一款UI自动生成代码插件,提供UI自动生成代码全流程解决方案。
Home Page: https://picassoui.58.com
License: MIT License
一款UI自动生成代码插件,提供UI自动生成代码全流程解决方案。
Home Page: https://picassoui.58.com
License: MIT License
how to use picasso plugin with sketchtool commandline tool?
Thanks for your excellent work.
After I achieved the XML or HTML code from Picasso, how to re-converted it to sketch file.
Thanks in advance.
尝试了自行构建picasso-package下的包,以替换主工程使用的 @wubafe/picasso-parse依赖,结果构建完插件,运行报了如下错误:
操作步骤如下:
1、进入picasso-package,跑lerna bootstrap 和 lerna run build命令构建完各依赖包
2、进入到主工程的package.json下修改 dependencies的@wubafe/picasso-parse:"0.0.35" 为
3、运行 npm run dev构建插件
构建完成后安装插件使用报最上面错误
其中第二步试过用npm link也会报一样的错误
环境:
node 12.16.2
sketch 82
一直报请选择画板,无解。
$ npm install -g @wubafe/picasso
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: this library is no longer supported
$HOME/bin/picasso -> $HOME/lib/node_modules/@wubafe/picasso/bin/index.js
> [email protected] install $HOME/lib/node_modules/@wubafe/picasso/node_modules/images
> node scripts/nothing.js
> [email protected] install $HOME/lib/node_modules/@wubafe/picasso/node_modules/node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/linux-x64-64_binding.node
...
gyp info ok
Installed to $HOME/lib/node_modules/@wubafe/picasso/node_modules/node-sass/vendor/linux-x64-64/binding.node
+ @wubafe/[email protected]
added 221 packages from 182 contributors in 1478.519s
$ picasso -s ../mysample.sketch
sketch源文件路径 $HOME/mysample.sketch
解析生成代码存放目录 $HOME
/bin/sh: 1: /Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool: not found
(node:15122) UnhandledPromiseRejectionWarning: Error: Command failed: /Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool -v
/bin/sh: 1: /Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool: not found
at checkExecSyncError (child_process.js:629:11)
at Object.execSync (child_process.js:666:13)
at module.exports ($HOME/lib/node_modules/@wubafe/picasso/src/index.js:158:41)
at $HOME/lib/node_modules/@wubafe/picasso/bin/index.js:44:11
at Object.<anonymous> ($HOME/lib/node_modules/@wubafe/picasso/bin/index.js:45:3)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
(node:15122) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:15122) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
detachStylesAndReplaceWithGroupRecursively(); is ok,but return value struct is changed!
如题,另外代码先好好整理一遍再叫人提PR吧。
如题
复现步骤:
1.下载master版本 npm i (3.9下载)
2.在sketch导出html,可以看到html有多层的树结构(能区分出多个Row)
3.进入picasso-package/packages/picasso-parse
4.npm run tsc 后,把dist内的内容,覆盖到 node_modules/@wubafe/picasso-parse/dist
5.重新导出html,发现不能区分多个Row了
怀疑是否原@wubafe内的源代码和master下的代码不一致,求前辈帮忙!
非常感谢!
md文档只有文字表述,没有截图及产品界面,或者简单gif动画 怎么操作,让用户git clone前 可以看到怎么工作运行的
Sketch 转出来的代码,样式中有嵌套,实际RN是不支持嵌套的,这个你们实际使用是怎么用的呢?
const styles = StyleSheet.create({
"submit": {
"textStyle": {
"lineHeight": scaleSize(22),
"textAlign": "left",
"color": {
"alpha": 1,
"red": 51,
"green": 51,
"blue": 51
},
"fontSize": scaleSize(16),
"fontFamily": "Avenir-Medium",
"fontWeight": 500
},
"marginTop": scaleSize(-23)
}
})
问下 在 /Picasso/picasso-package/packages/sketch-dsl/src/index
resizingConstraint 和 resizingType 看似是表示 宽度是否伸缩 以及对齐方式 而其值是一堆数字
想请教下 是否了解其具体值的含义
同时在只找到了 https://github.com/sketch-hq/sketch-document/blob/a479c01b99542e83a1f4885096cfd81da2bf3229/packages/file-format/schema/enums/resize-type.schema.yaml
个人感觉开发更习惯使用代码操作
如果可以直接解析 sketch 文件,可以配合脚本进行自动化操作
skeditor 是使用 jszip 解析 sketch 文件然后借助 skia 将图层使用 canvas 画到网页上。
我看源码部分,很多逻辑是和 sketch 运行环境强相关,没有解耦开,不是很好处理
咱们后续是否有计划支持直接解析 sketch 文件呀?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.