kujiale-mobile / painter Goto Github PK

View Code? Open in Web Editor NEW

4.2K 74.0 573.0 670 KB

小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片

Home Page: https://painterjs.github.io/

License: Apache License 2.0

JavaScript 100.00%

painter's People

Contributors

Stargazers

Watchers

Forkers

libin1991 cppalien csldev jjeejj youyiyang area-cqk cilla123 motherhouse lichengtao1989 kucy ruanjianbai cardsix surplus-cat shiliuxing wwxx xeonpc kerasking love2157dream guofeng007 wulh8410 wechat4app sean66 fkdl tanqiaofang et-zhang jsj-maker forked-repositories emaiqi xiaoxxaoniao stonesinger waitingfy lvsjack kennow fcgll520 cmying reganan 634323580 shesw dchijack flitrue mashihua kevinzl charleslo1 lb0726 lpjxlove beibei1 weicharlie chengzmin appreturn andyfangjunjie gmtaurus lydiaaawang yuff2018 yang-yibu xieshiyi shaodushu 15806122600 roclee81 androidhelper lhz609673781 guyueyuqi kehaowu chen1zee a2393439531 nciefeiniu jserlin lvruiyang xiaozhuxiaozhi yuanrufeng bobqiu shangyou xyz1041931294 timlang liujhfly itkang trtrtr6 kylelkh wlx-flyrainbow 0jarvis0 guofengma kuangyeheng youli-slz semi-xi newzhaozilong dajunzhu myzingy peirancao jre-sun daimons hyxiaohaiyang icai starkmore raincoolly chain78 agiapp woerwin zhangqm666 lover2668 harrylxue mr-lrf

painter's Issues

文字不能两端对齐（justify）多行文本看着比较难受

有啥方法吗？

小程序打开调试模式或者真机调试下，网络加载的图片显示，普通模式下，不显示图片

如上图，开发者工具上是显示好的，
但是手机上预览就不显示图片，打开调试模式后，显示图片。ios 安卓都已测试，同样问题

可以获取绘制的文字内容的高度吗？

是否考虑base64?

现在的加载本地图片资源是设置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)}`);
                    },

view用了borderRadius这个属性就会生成一条边框

用了圆角属性填充颜色都会有一条黑色边框

图片的width，height添加auto属性

多行状态下最后一行的对齐问题

�按照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)));

改之前：

改之后

canvasToTempFilePath failed, {"errMsg":"canvasToTempFilePath: fail canvas is empty"}

mpvue项目点列表进入需要绘制的详情，未绘绘制完，点返回错误
canvasToTempFilePath failed, {"errMsg":"canvasToTempFilePath: fail canvas is empty"}

字体可以设置透明度吗

可以实现画圆的功能吗？

希望可以考虑添加画圆（根据半径，弧度...绘制）的功能

canvas的高度能随着画的东西的多少而增加或者减少吗？

mpvue 制作海报

真机测试的时候，微信的头像，没有画到画布上。在开发者工具上可以，请问这是什么缘故

rect 背景色rgba 不生效，另外text类型能不能设置背景色？

       {
          type: 'rect',
          css: {
            width: '173rpx',
            height: '43rpx',
            background: 'rgba(0,0,0,0.3)',
            top: '497rpx',
            left: '40rpx'
          }
        }

是不是一次只能绘制一个图片

文字行数不确定的情况如何实现高度自适应和排版

如下图所示，奖项和抽奖说明的文字个数都是不确定的，如何实现这种布局？

有相对定位的解决方案么

旁边的两条渐近线我想用 image 实现，但是中间打码的数据长度并不确定，如何定位呢。

小程序跳转现在限制10个这个项目要火了

请问下数据是如何传递进去的

请问下数据是如何从调用页面的data里传递进去card.js的。比如像图片的地址，text的文字内容，还有有些网络图片还是在真机上不显示，求大佬解决哈

canvas绘制的文字居中

需要让canvas绘制一段文字文字长度不固定需要让文字在canvas中居中显示

我想要这个字居中 think you

生成二维码的大小很难控制

文字

一行中文字有大有小，有不同颜色，这种情况要怎么设置

图片在canvas之外时候radius效果无效

图片大小大于画布的时候画布的圆角效果无效图片无法被遮盖

真机图片显示问题

小程序中生成一个分享海报，需要贴上头像和二维码，在电脑上生成两个图片都可以显示，但是在真机上，只有二维码能显示，二维码是本地图片，头像是网络图片，微信头像，已经把头像地址的域名添加到合法域名中了，Android和iOS都无法显示，请问还有其他什么原因呢？

view里面的文字的位置能不能进行居中

是否可以支持阴影

和Canvas一样，不支持真机显示base64

mpvue中imgOk无效

没有输出

painter中的path需要等到数据加载完成后再获取怎么做？

现在是在onImgOK中获取imgPath，如果我是想在数据请求成功以后对palette="{{posterData}}"中的posterData进行设置然后获取imgPath怎么做？

希望文字可折行，超过设置的length, 设置几行，然后显示...

mpvue出现无限更新的bug

当赋值给this.shareImg的时候，发生了无限更新bug，不停的重新绘制。

painter.js

目前我通过增加判断palette是否有变化来解决这个问题

type类型rect中能否填充image

type类型rect中能否添加image

是否考虑支持文字竖直排列？

CSS中writing-mode可以改变文档流的方向，Painter考虑增加此功能吗

坐标为负时报错

当 top、left 等坐标为负时报错，应该是限制了不能用负值，但是实际开发中，有些图片的位置是会超出视图的，比如绘制贴纸功能，是由用户自己拖拽控件进行合成，这时候就会有负坐标的产生。我修改了 painter.js 的 toPx() 的正则验证试了下，发现其实是可以兼容这部分功能。

mpvue 里照着文档里在 main.js 里引入不知道为什么好像没有渲染也没有报错

如题。
然后我在页面文件夹下建了一个 main.json 然后写

{
  "usingComponents": {
    "painter": "/static/painter/painter"
  }
}

就可以渲染了

Painter 项目点子征集贴

如果你有任何想到用 Painter 可以实现的点子，欢迎留言分享，我们一起让 Painter 更强大好用。

背景色能填充渐变色吗

背景色的值可以写渐变吗

image的mode属性如何设置？

{
type: 'image',
url: '/images/icon_recruit-bg.jpg',
css: {
mode: 'aspectFill',
top: '0rpx',
left: '0rpx',
width: '750rpx',
height: '750rpx',
},
},
文档说mode是image的自有css，是这样写吗？

有办法让palette最外层容器的高度根据子View自动调整吗

如题，我从上一个页面传递一段文字过来，因为文字长短不一，不能把palette的高度写死。有办法吗？我没试出来。

来个Android版的那就6666666

align属性无效

使用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;
}`

92 | url: tempFileList[imageIndex]
| ^
93 | })
94 | imageIndex++
95 | } else if (views[i].type === 'text') {