一技术上
1 学习了多层布局和拖拽的技术，之前由于不懂这方面的技术，在做上一个运营项目的时候拖拽自己的写的，结果肯定很不理想很low,最近在看博客技术的时候发现了一个新的技术，原来拖拽可以做的这样随意。示例代码
const canvasEl = useRef(null);
let can: fabric.Canvas | null = null;
var deleteIcon =
"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";
var img = document.createElement("img");
img.src = deleteIcon;
const add = (result): void => {
fabric.Image.fromURL(result, img => {
img.scaleToWidth(80);
img.scaleToHeight(80);
img.set({
left: Math.random() * 500,
top: Math.random() * 200,
angle: 30,
opacity: 0.85
});
can?.add(img);
});
};
const deleteObject = (eventData: any, transform: any) => {
var target = transform.target;
var canvas = target.canvas;
canvas.remove(target);
canvas.requestRenderAll();
};
const renderIcon = (
ctx: {
save: () => void;
translate: (arg0: any, arg1: any) => void;
rotate: (arg0: number) => void;
drawImage: (
arg0: HTMLImageElement,
arg1: number,
arg2: number,
arg3: any,
arg4: any
) => void;
restore: () => void;
},
left: any,
top: any,
styleOverride: any,
fabricObject: { angle: number }
) => {
var size = 24;
ctx.save();
ctx.translate(left, top);
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
ctx.drawImage(img, -size / 2, -size / 2, size, size);
ctx.restore();
};
useEffect(() => {
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.cornerColor = "blue";
fabric.Object.prototype.cornerStyle = "circle";
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
x: 0.5,
y: -0.5,
offsetY: 16,
cursorStyle: "pointer",
mouseUpHandler: deleteObject,
render: renderIcon,
cornerSize: 24
});
can = new fabric.Canvas(canvasEl.current, {
width: 625,
height: 350
});
return () => {
can?.dispose();
};
}, []);
const fileDom = useRef(null);
const onchange = (e: any) => {
const file = fileDom?.current.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(result) {
add(result?.target?.result);
e.target.value = "";
};
};
const addText = () => {
var text = new fabric.Textbox("请输入文字！", {
width: 150,
height: 100,
hasControls: true,
fontSize: 14
});
can?.add(text);
can?.centerObject(text);
};
二 思维上
无
三 情商上
情绪控制真的很重要，意识到情绪管理的重要性，需要多读书
