分类 creator 下的文章

creator里面没有折线图,可以参考这个

// 折线图
const { ccclass, property } = cc._decorator;

@ccclass
export default class LineChartComponent extends cc.Graphics {
    @property(cc.Color)
    lineColor: cc.Color = null;
    @property(cc.Color)
    circleColor: cc.Color = null;
    @property(cc.Color)
    xyColor: cc.Color = null;
    @property
    height = 200;
    @property
    width = 600;
    @property
    stepLeve = 7;

    public paint = null;
    onLoad() {
        this.width += Math.floor(this.width / this.stepLeve);
    }
    onDestroy() {

    }

    start() {
        this.paint = this.node.addComponent(cc.Graphics);
    }

    randChart() {
        let list = [];
        for (let i = 0; i < this.stepLeve; i++) {
            list.push(Math.random() * 100);
        }
        this.setLineChart(list, null);
    }

    setLineChart(listY, listX) {
        let color = this.lineColor;
        // 计算数据
        let max = Math.max.apply(null, listY);
        let min = Math.min.apply(null, listY);
        let yd = this.height / (max - min);
        let xd = this.width / listY.length;

        // 画横轴
        this.paint.lineWidth = 5;
        this.paint.strokeColor = new cc.Color(66, 66, 66, 66);
        this.paint.moveTo(0, 0);
        for (let i = 0; i <= this.stepLeve; i++) {
            this.paint.moveTo(0, i * this.height / this.stepLeve);
            this.paint.lineTo(this.width, i * this.height / this.stepLeve);
            this.putLabel(-20, i * this.height / this.stepLeve - 15, Math.floor((i * (max - min) / this.stepLeve) + min), 25)
        }
        this.paint.stroke();

        // 画数据线
        this.paint.lineWidth = 5;
        this.paint.strokeColor = color;
        this.paint.moveTo(1, (listY[0] - min) * yd);
        for (let i = 1; i < listY.length; i++) {
            this.paint.lineTo(i * xd, (listY[i] - min) * yd);
        }
        this.paint.stroke();


        // 画 刻度,点,字
        this.paint.lineWidth = 4;
        this.paint.strokeColor = new cc.Color(66, 66, 66, 66);
        for (let i = 0; i < listY.length; i++) {
            this.paint.moveTo(i * xd, 0);
            this.paint.lineTo(i * xd, -10);
            this.paint.stroke();

            this.putPoint(i * xd, (listY[i] - min) * yd, 7)
            if (listX && listX[i]) {
                this.putLabel(i * xd, -40, listX[i], 25);
            }
            else {
                this.putLabel(i * xd, -40, i, 25)
            }

        }

    }

    // xy字
    putLabel(x, y, str, size) {
        let textNode = new cc.Node();
        let text = textNode.addComponent(cc.Label);
        this.node.addChild(textNode);
        text.string = str;
        textNode.x = x
        textNode.y = y;
        textNode.height = size;
        text.fontSize = textNode.height - 3;
        textNode.color = this.xyColor;
    }

    // 画实心点
    putPoint(x, y, r) {
        this.paint.fillColor = this.circleColor;
        this.paint.circle(x, y, r);
        this.paint.fill();
    }

    // update (dt) {}
}

window.devicePixelRatio = 3;
cc.macro.ENABLE_WEBGL_ANTIALIAS = true;
cc.view.enableRetina(true);
cc.view.resizeWithBrowserSize(true);

Editbox是creator的老问题,各个版本都有各种各样的bug,处理creator的Editbox顶的太高问题,挡住都看不到内容了,新的creator2.2.1-2.4.3都有顶太高的问题,不能选择黏贴问题。
解决方案如下:


- 阅读剩余部分 -

creator引擎bug
1)editbox在web上手机打开,密码第一个显示为大写,其实为小写。
修改CocosCreator_2.2.1/resources/engine/cocos2d/core/components/editbox/WebEditBoxImpl.js



- 阅读剩余部分 -