kujiale-mobile / painter Goto Github PK
View Code? Open in Web Editor NEW小程序生成图片库,轻松通过 json 方式绘制一张可以发到朋友圈的图片
Home Page: https://painterjs.github.io/
License: Apache License 2.0
小程序生成图片库,轻松通过 json 方式绘制一张可以发到朋友圈的图片
Home Page: https://painterjs.github.io/
License: Apache License 2.0
如题。
然后我在页面文件夹下建了一个 main.json 然后写
{
"usingComponents": {
"painter": "/static/painter/painter"
}
}
就可以渲染了
一段文字 里面包含😊这样的输入法表情。。
然后悲剧错乱了
小程序中生成一个分享海报,需要贴上头像和二维码,在电脑上生成两个图片都可以显示,但是在真机上,只有二维码能显示,二维码是本地图片,头像是网络图片,微信头像,已经把头像地址的域名添加到合法域名中了,Android和iOS都无法显示,请问还有其他什么原因呢?
请问下数据是如何从调用页面的data里传递进去card.js的。比如像图片的地址,text的文字内容,还有有些网络图片还是在真机上不显示,求大佬解决哈
如题,我从上一个页面传递一段文字过来,因为文字长短不一,不能把palette的高度写死。有办法吗?我没试出来。
一行中文字有大有小,有不同颜色,这种情况要怎么设置
因为生成的图片比较复杂,页面加载完成比较慢,所以点击按钮生成图的时候会报错,点击第二次才会保存成功。有什么办法可以加延时吗?
用了圆角属性填充颜色都会有一条黑色边框
mpvue项目点列表进入需要绘制的详情,未绘绘制完,点返回 错误
canvasToTempFilePath failed, {"errMsg":"canvasToTempFilePath: fail canvas is empty"}
rect 背景色rgba 不生效, 另外text类型能不能设置背景色?
{
type: 'rect',
css: {
width: '173rpx',
height: '43rpx',
background: 'rgba(0,0,0,0.3)',
top: '497rpx',
left: '40rpx'
}
}
图片大小大于画布的时候 画布的圆角效果无效 图片无法被遮盖
背景色的值可以写渐变吗
真机测试的时候,微信的头像,没有画到画布上。在开发者工具上可以,请问这是什么缘故
请问这个api有接口吗?如果怎样实现文字居中?
希望可以考虑添加画圆(根据半径,弧度...绘制)的功能
使用align:center,实际效果没有生效
代码如下card.js
export default class LastMayday {
palette() {
return ({
width: '750rpx',
height: '750rpx',
background: '/palette/share.png',
views: [{
type: 'image',
url: '/palette/avatar.jpg',
css: {
align: 'center',
top: '50rpx',
borderRadius: '100rpx',
borderWidth: '0rpx',
width: '160rpx',
height: '160rpx',
},
},
{
type: 'text',
text: '蓝皮书的店',
css: {
align: 'center',
width: '750rpx',
top: `250rpx`,
color: '#ffffff',
fontSize: '50rpx'
}
},
{
type: 'text',
text: '150500',
css: {
textAlign: 'center',
top: `330rpx`,
color: '#ffffff',
fontSize: '34rpx',
left: '282rpx'
}
},
{
type: 'text',
text: '150500',
css: {
textAlign: 'center',
top: `330rpx`,
color: '#ffffff',
fontSize: '34rpx',
left: '282rpx'
}
}
],
});
}
}
const startTop = 50;
const startLeft = 0;
const gapSize = 70;
const common = {
left: `${startLeft}rpx`,
fontSize: '40rpx',
};
function _textDecoration(decoration, index, color) {
return ({
type: 'text',
text: decoration,
css: [{
top: `${startTop + index * gapSize}rpx`,
color: color,
textDecoration: decoration,
}, common],
});
}
function _image(index, rotate, borderRadius) {
return ({
type: 'image',
url: '/palette/avatar.jpg',
css: {
top: `${startTop + 8.5 * gapSize}rpx`,
left: `${startLeft + 160 * index}rpx`,
width: '120rpx',
height: '120rpx',
rotate: rotate,
borderRadius: borderRadius,
},
});
}
function _des(index, content) {
const des = {
type: 'text',
text: content,
css: {
fontSize: '22rpx',
top: `${startTop + 8.5 * gapSize + 140}rpx`,
},
};
if (index === 3) {
des.css.right = '60rpx';
} else {
des.css.left = `${startLeft + 120 * index + 30}rpx`;
}
return des;
}`
现在的加载本地图片资源是设置URL为相对地址,,我写入base64后,会报错.
wx.getImageInfo({
src: view.url,
success: res => {
// 获得一下图片信息,供后续裁减使用
view.sWidth = res.width;
view.sHeight = res.height;
},
fail: error => {
console.error(`getImageInfo failed, ${JSON.stringify(error)}`);
},
当 top、left 等坐标为负时报错,应该是限制了不能用负值,但是实际开发中,有些图片的位置是会超出视图的,比如绘制贴纸功能,是由用户自己拖拽控件进行合成,这时候就会有负坐标的产生。我修改了 painter.js 的 toPx() 的正则验证试了下,发现其实是可以兼容这部分功能。
如果你有任何想到用 Painter 可以实现的点子,欢迎留言分享,我们一起让 Painter 更强大好用。
如题
�按照css写法的话如果设置了多行的情况而且是align:center
,那样最后一行是也应该是居中的,不确定其他人会不会有这样的一个需求。
我的想法是如果我设置了align: center
那样,哪怕是你设置了width,在里面的内容也应该是居中的,所以我改了一下你的代码
let posX = 0;
if(align == 'center') {
posX = -(measuredWith / 2);
} else {
posX = -(width / 2);
}
this.ctx.fillText(text, posX, -(height / 2) + (i === 0 ? view.css.fontSize.toPx() : (view.css.fontSize.toPx() + i * lineHeight)));
CSS中writing-mode可以改变文档流的方向,Painter考虑增加此功能吗
{
type: 'image',
url: '/images/icon_recruit-bg.jpg',
css: {
mode: 'aspectFill',
top: '0rpx',
left: '0rpx',
width: '750rpx',
height: '750rpx',
},
},
文档说mode是image的自有css,是这样写吗?
type类型rect中能否添加image
有啥方法吗?
view里面的文字的位置能不能进行居中
fontFamily能支持吗
现在是在onImgOK中获取imgPath,如果我是想在数据请求成功以后对palette="{{posterData}}"中的posterData进行设置 然后获取imgPath怎么做?
Error: file: static/canvasdrawer/canvasdrawer.js
unknown: Unexpected token (92:12)
90 | this.drawImage({
91 | ...views[i],
92 | url: tempFileList[imageIndex]
| ^
93 | })
94 | imageIndex++
95 | } else if (views[i].type === 'text') {
有个疑问,档使用官方提供的小程序码生成时,由于每次生成的小程序的临时文件地址不一样,这样的话岂不是每次都要缓存,这样的话,缓存空间被占用的很快,还是我理解有误
字体可以设置透明度吗
没有输出
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.