标签：set fabric get 子类 button ctx Button options

创建 button 类：

import { fabric } from 'fabric';

/**
 * 继承并扩展 rect ，实现：text + rect 的类 button 组
 */
export class Button {
    button;

    constructor(config) {
        fabric.Button = fabric.util.createClass(fabric.Rect, {
            type: 'LabelRect',
            initialize: function (options) {
                options || (options = {});
                this.callSuper('initialize', options);
                this.set('id', options.id || '');
                this.set('label', options.label || '');
                this.set('fontColor', options.fontColor || '');
                this.set('fontSize', options.fontSize || '');
                this.set('fontFamily', options.fontFamily || '');
                this.set('fontWeight', options.fontWeight || '');
                this.set('fontStyle', options.fontStyle || '');
                this.set('fontVertical', options.fontVertical || '');
                this.set('fontHorizontal', options.fontHorizontal || '');
            },
            toObject: function () {
                return fabric.util.object.extend(this.callSuper('toObject'), {
                    id: this.get('id'),
                    label: this.get('label'),
                    fontColor: this.get('fontColor'),
                    fontSize: this.get('fontSize'),
                    fontFamily: this.get('fontFamily'),
                    fontWeight: this.get('fontWeight'),
                    fontStyle: this.get('fontStyle'),
                    fontVertical: this.get('fontVertical'),
                    fontHorizontal: this.get('fontHorizontal'),
                });
            },
            _render: function (ctx) {
                this.callSuper('_render', ctx);
                ctx.font = `${ this.fontStyle } ${ this.fontWeight } ${ this.fontSize }px ${ this.fontFamily }`;
                ctx.fillStyle = this.fontColor;
                let x, y;
                // 计算水平
                switch (this.fontHorizontal) {
                    case 'left':
                        ctx.textAlign = 'left';
                        x = -(this.width - this.rx) / 2;
                        break;
                    case 'center':
                        ctx.textAlign = 'center';
                        x = 0;
                        break;
                    case 'right':
                        ctx.textAlign = 'right';
                        x = (this.width - this.rx) / 2;
                        break;
                }
                // 计算垂直
                switch (this.fontVertical) {
                    case 'top':
                        y = -(this.height - this.ry) / 2;
                        ctx.textBaseline = 'top';
                        break;
                    case 'center':
                        y = 1;
                        ctx.textBaseline = 'middle';
                        break;
                    case 'bottom':
                        y = (this.height) / 2;
                        ctx.textBaseline = 'bottom';
                        break;
                }
                ctx.fillText(this.label, x, y);
            }
        });return new fabric.Button(config);
    }

    static defaultButton() {
        return {
            width: 160,
            height: 60,
            fill: '#5570C4', // 背景色
            rx: 10, // 圆角
            ry: 10, // 圆角
            left: 100,
            top: 100,
            label: 'Button',
            fontVertical: 'center', // 垂直 top center bottom
            fontHorizontal: 'center', // 水平 left center right
            fontSize: 20,
            fontWeight: 'normal', // 文字粗细 normal bold 或者数字（100,200,400,600,800）
            fontStyle: 'normal', // 字体风格 normal  italic
            fontFamily: 'Helvetica',
            fontColor: '#fff',
            stroke: '#ddd', // 边框颜色
            strokeWidth: 1, // 边框粗细
            angle: 0,
            id: Math.random(),
        }
    }
}

调用：

import { Button } from "./class/button";

/**
 * 测试 Button 类
 */
export class LabelRect {
    isScaling = false;
    constructor(canvas) {
        // 创建 button 对象
        let button = new Button(Button.defaultButton());
        canvas.add(button);
        button.set('label', 'Button' + Math.random());
        // 绑定事件
        this.bindEvents(canvas, button);
    }

    /**
     * 绑定事件
     * @param canvas
     * @param button
     */
    bindEvents(canvas, button) {
        canvas.on('mouse:dblclick', (e) => {
            if (e.target && e.target.id === button.id) {
                console.log('dblclick');
            }
        });
        button.on('mousedown', (e) => {
            console.log('mousedown');
        });
        button.on('mouseover', (e) => {
            console.log('mouseover');
        });
        button.on('mouseout', (e) => {
            console.log('mouseout');
        });
        button.on('mouseup', (e) => {
            console.log('mouseup');
            if (this.isScaling) {
                let scaleX = button.scaleX;
                let scaleY = button.scaleY;
                button.set({
                    width: button.width * scaleX,
                    height: button.height * scaleY,
                    rx: button.rx * scaleX,
                    ry: button.ry * scaleY,
                    scaleX: 1,
                    scaleY: 1,
                });
                canvas.renderAll();
                this.isScaling = false;
            }
        });
        canvas.on('object:scaling', (e) => {
            this.isScaling = true;
        });
    }
}

标签：set,fabric,get,子类,button,ctx,Button,options
来源： https://www.cnblogs.com/guofan/p/16164170.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。