PHP code example of quansitech / qs-cusposter

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

quansitech / qs-cusposter example snippets

// $this->view 为视图对象，一般是Controller类绑定的 view对象
$builder = new \QsCusPoster\CusPosterDesignBuilder\CusPosterDesignBuilder($this->view);
// 和ListBuilder的setNIDByNode方法一样，设置当前高亮的菜单
$builder->setNIDByNode("admin", "poster", "index")
//设置海报数据提交到的接口地址
->setPostUrl(U("/admin/poster/save"))
//是否要启动oss上传模块
->setOss(true)
//设置图片上传地址，如果启动oss，则填写上传策略的获取地址
->setUploadAction(U("/extends/aliyunOss/policyGet"))
//如果要编辑已有的海报，则需要通过这个方法传入海报数据
->setPosterData($posterData)
//添加自定义变量组件，第一个参数为变量键名， 第二个参数为展示名称， 第三个参数是预览用例
->addVarComponent('companyName', '公司名称', '全思科技')
->addVarComponent('companyType', '公司性质', '民营企业')
//生成海报设计生成器页面
->build()

//传入海报数据，注意是数组格式
$builder = new \QsCusPoster\CusPosterBuilder($posterData);
//假如有使用自定义变量组件，通过该方法来设定变量值
$builder->setVarValue("companyName", "张三")
//设置生成canvas宽度，不设置的话则保持原图的宽度
->setWidth(300)
//设置生成canvas高度，不设置的话则保持原图的高度
->setHeight(300)
->setVarValue("companyType", "民营企业")
->build();

<div id="poster"></div>
// 扩展自动将该js映射到/public/cusposter/poster-render.js，如没有特殊改动，则是直接使用该地址即可获取到js文件
<script src="/Public/cusposter/poster-render.js"></script>
<script>
    // $posterData可以用 CusPosterBuilder类的genData方法来生成
    var posterData =  echo json_encode($posterData, JSON_PRETTY_PRINT);

javascript
const newCompNode = observer(({node}) => {
    // 自定义组件的代码
});

newCompNode.propertySchema = {
    // 自定义组件属性的内容
    // 可参考已有的组件
};

newCompNode.setWrapStyle = (node) => {
    // 自定义wrap元素的属性
    // 可参考已有的组件
}

newCompNode.defaultValue = (node) => {
    // 往海报新增组件时, 给node对象的value属性添加的默认值
    // 如果propertySchema中有默认值，也会自动增加到node.value中
    // 该方法适用于需要动态设置的情况
}

newCompNode.resizeCallback = (node, width, height) => {
    // 组件大小改变时的回调
}

newCompNode.valueMap = {
    //属性组件一般采用value参数作为传值属性
    //但也有一些特殊的组件会采用其他的属性名称，例如 ImageUpload组件则是'defaultFileList'，这时就需要定义valueMap告诉程序其映射关系
    //img: 'defaultFileList'
}

//指定组件能否通过拖拉改变大小，默认是false
newCompNode.resize = true;



export const newComp = {
    // id 组件id号， label 值可以通过 options的nodeComponents[0].title定义
    Thumb: ({id, label}) => {
        return <div className="qs-poster-node-thumb" id={id} draggable={true}>
            // 此处放缩略图的 svg内容
            <span className="drag-title">{label}</span>
        </div>
    },
    Node: newCompNode,
    //像Var这种需要根据业务场景进行外部定义的组件，则需要设置成true
    custom: true,
    //自定义组件都需要设置成true，仅Poster这种系统组件才是false
    pure: true
}