interpersonal-30

人际蛛网图怎么画

人际关系类型

人际关系类型是指人际关系的种类区分。蒂博特根据相依观点，把人际关系划分为四类：(1)虚假相依，指参加相互作用的双方主要按自己的意图行事，与对方的反应很少相依；(2)非对称相依，指一方的行为基于对方的行为，而对方的行为主要依据自己的意图；(3)反应性相依，指不管个人原来的意图如何，只按对方说的去反应；(4)彼此相依。按不同标准还可有许多划分，如按需求可划分为情感性人际关系或工具性人际关系。亦可按喜好、关系存在的长短等进行划分。

基本信息

中文名

人际关系类型

外文名

Interpersonal relationship type。

含义

指人际关系的种类区分

类别

(1)虚假相依；(2)非对称相依；(3)反应性相依；(4)彼此相依。

词语释义

所谓人际关系，是指人们在各种具体的社会领域中，通过人与人之间的交往建立起心理上的联系，它反映在群体活动中，人们相互之间的情感距离和相亲密的人际关系都属于良好的人际关系，对于一个人的工作、生活和学习是有益的；相反，不和谐、紧张、消极、敌对的人际关系则是不良的人际，对一个的工作、生活和学习是有害的。社会心理学的调查研究了表明，良好的人际关系是一个人心理正常发展，个性保持健康和生活具有幸福感的重要条件之一。古语云：“天时不如地利，地利不如人和”。对于远离家乡外出求学的大学生来说，无论在什么情况下都应重视“人和”这个重要因素。美国著名成人教育家戴尔.卡耐基经过大量的研究发现说：“一个人事业上的成功，只有百分之十一是由于他的专业技术，另外的百分之八十要靠人际关系、处世技巧。”此话也许说得绝对些，但也从另一侧面说明良好人际关系对成就事业的重要性。

人际关系书籍

1.静态蛛网图

第一步就是如何将一串数据映射成下面的图表:。

var data = {

"攻击力": 70.0,

"生命": 90.0,

"闪避": 50.0,

"暴击": 70.0,

"破格": 80.0,

"格挡": 100.0,

};

复制代码

1.1：创建AbilityWidget组件。

线新建一个StatelessWidget的组件使用AbilityPainter进行绘制。

这里先定义画笔、路径等成员变量。

import 'package:flutter/material.dart';。

class AbilityWidget extends StatefulWidget {。

@override

_AbilityWidgetState createState() => _AbilityWidgetState();。

class _AbilityWidgetState extends State<AbilityWidget>{。

@override

Widget build(BuildContext context) {。

var paint = CustomPaint(。

painter: AbilityPainter(),。

);

return SizedBox(width: 200, height: 200, child: paint,);。

}

class AbilityPainter extends CustomPainter {。

var data = {

"攻击力": 70.0,。

"生命": 90.0,。

"闪避": 50.0,。

"暴击": 70.0,。

"破格": 80.0,。

"格挡": 100.0,。

};

double mRadius = 100; //外圆半径。

Paint mLinePaint; //线画笔。

Paint mAbilityPaint; //区域画笔。

Paint mFillPaint;//填充画笔。

Path mLinePath;//短直线路径。

Path mAbilityPath;//范围路径。

AbilityPainter() {。

mLinePath = Path();。

mAbilityPath = Path();。

mLinePaint = Paint()。

..color = Colors.black。

..style = PaintingStyle.stroke。

..strokeWidth=0.008 * mRadius。

..isAntiAlias = true;。

mFillPaint = Paint() //填充画笔。

..strokeWidth = 0.05 * mRadius。

..color = Colors.black。

..isAntiAlias = true;。

mAbilityPaint = Paint()。

..color = Color(0x8897C5FE)。

..isAntiAlias = true;。

}

@override

void paint(Canvas canvas, Size size) {。

}

@override

bool shouldRepaint(CustomPainter oldDelegate) {。

return true;。

}

复制代码

1.2.绘制外圈

为了减少变量值，让尺寸具有很好的联动性(等比扩缩),小黑条的长宽将取决于最大半径mRadius。

则：小黑条长:mRadius*0.08 小黑条宽:mRadius*0.05 所以r2=mRadius-mRadius*0.08。

@override

void paint(Canvas canvas, Size size) {。

canvas.translate(mRadius, mRadius); //移动坐标系。

drawOutCircle(canvas);。

//绘制外圈

void drawOutCircle(Canvas canvas) {。

canvas.save();//新建图层。

canvas.drawCircle(Offset(0, 0), mRadius, mLinePaint);//圆形的绘制。

double r2 = mRadius - 0.08 * mRadius; //下圆半径。

canvas.drawCircle(Offset(0, 0), r2, mLinePaint);。

for (var i = 0.0; i < 22; i++) {//循环画出小黑条。

canvas.save();//新建图层。

canvas.rotate(360 / 22 * i / 180 * pi);//旋转:注意传入的是弧度（与Android不同）

canvas.drawLine(Offset(0, -mRadius), Offset(0, -r2), mFillPaint);//线的绘制。

canvas.restore();//释放图层。

}

canvas.restore();//释放图层。

复制代码

1.3.绘制内圈

同样尺寸和最外圆看齐，这里绘制有一丢丢复杂，你需要了解canvas和path的使用。

看不懂的可转到canvas和path,如果看了这两篇还问绘制有什么技巧的，可转到这里。

@override

void paint(Canvas canvas, Size size) {。

canvas.translate(mRadius, mRadius); //移动坐标系。

drawOutCircle(canvas);。

drawInnerCircle(canvas);。

//绘制内圈圆

drawInnerCircle(Canvas canvas) {。

double innerRadius = 0.618 * mRadius;//内圆半径。

canvas.drawCircle(Offset(0, 0), innerRadius, mLinePaint);。

canvas.save();。

for (var i = 0; i < 6; i++) {//遍历6条线。

canvas.save();。

canvas.rotate(60 * i.toDouble() / 180 * pi); //每次旋转60°。

mPath.moveTo(0, -innerRadius);。

mPath.relativeLineTo(0, innerRadius); //线的路径。

for (int j = 1; j < 6; j++) {。

mPath.moveTo(-mRadius * 0.02, innerRadius / 6 * j);。

mPath.relativeLineTo(mRadius * 0.02 * 2, 0);。

} //加5条小线

canvas.drawPath(mPath, mLinePaint); //绘制线。

canvas.restore();。

}

canvas.restore();。

复制代码

1.3.绘制文字

Flutter中绘制文字可有点略坑，我这里简单的封了一个drawText函数用来画文字。

记得导入ui库,使用Paragraph进行文字的设置，drawParagraph进行绘制。

import 'dart:ui' as ui;。

//绘制文字

void drawInfoText(Canvas canvas) {。

double r2 = mRadius - 0.08 * mRadius; //下圆半径。

for (int i = 0; i < data.length; i++) {。

canvas.save();。

canvas.rotate(360 / data.length * i / 180 * pi + pi);。

drawText(canvas, data.keys.toList()[i], Offset(-50, r2 - 0.22 * mRadius),。

fontSize: mRadius * 0.1);。

canvas.restore();。

}

//绘制文字

drawText(Canvas canvas, String text, Offset offset,。

{Color color=Colors.black,。

double maxWith = 100,。

double fontSize,。

String fontFamily,。

TextAlign textAlign=TextAlign.center,。

FontWeight fontWeight=FontWeight.bold}) {。

// 绘制文字

var paragraphBuilder = ui.ParagraphBuilder(。

ui.ParagraphStyle(。

fontFamily: fontFamily,。

textAlign: textAlign,。

fontSize: fontSize,。

fontWeight: fontWeight,。

),

);

paragraphBuilder.pushStyle(。

ui.TextStyle(color: color, textBaseline: ui.TextBaseline.alphabetic));。

paragraphBuilder.addText(text);。

var paragraph = paragraphBuilder.build();。

paragraph.layout(ui.ParagraphConstraints(width: maxWith));。

canvas.drawParagraph(paragraph, Offset(offset.dx, offset.dy));。

复制代码

1.4.绘制范围

最后也是最难的一块，你准备好草稿纸了吗?。

//绘制区域

drawAbility(Canvas canvas, List<double> value) {。

double step = mRadius*0.618 / 6; //每小段的长度。

mAbilityPath.moveTo(0, -value[0] / 20 * step); //起点。

for (int i = 1; i < 6; i++) {。

double mark = value[i] / 20;//占几段。

mAbilityPath.lineTo(。

mark * step * cos(pi / 180 * (-30 + 60 * (i - 1))),。

mark * step * sin(pi / 180 * (-30 + 60 * (i - 1))));。

}

mAbilityPath.close();。

canvas.drawPath(mAbilityPath, mAbilityPaint);。

复制代码

2.动画效果

让外圈转和内圈相反方向转，所以可以让内圈和外圈分成两个组件放在一个Stack里。

2.1:抽离外圈

class OutlinePainter extends CustomPainter {。

double mRadius = 100; //外圆半径。

Paint mLinePaint; //线画笔。

Paint mFillPaint; //填充画笔。

OutlinePainter() {。

mLinePaint = Paint()。

..color = Colors.black。

..style = PaintingStyle.stroke。

..strokeWidth = 0.008 * mRadius。

..isAntiAlias = true;。

mFillPaint = Paint() //填充画笔。

..strokeWidth = 0.05 * mRadius。

..color = Colors.black。

..isAntiAlias = true;。

}

@override

void paint(Canvas canvas, Size size) {。

drawOutCircle(canvas);。

}

@override

bool shouldRepaint(CustomPainter oldDelegate) {。

// TODO: implement shouldRepaint。

return true;。

}

//绘制外圈

void drawOutCircle(Canvas canvas) {。

canvas.save(); //新建图层。

canvas.drawCircle(Offset(0, 0), mRadius, mLinePaint); //圆形的绘制。

double r2 = mRadius - 0.08 * mRadius; //下圆半径。

canvas.drawCircle(Offset(0, 0), r2, mLinePaint);。

for (var i = 0.0; i < 22; i++) {。

//循环画出小黑条。

canvas.save(); //新建图层。

canvas.rotate(360 / 22 * i / 180 * pi); //旋转:注意传入的是弧度（与Android不同）

canvas.drawLine(Offset(0, -mRadius), Offset(0, -r2), mFillPaint); //线的绘制。

canvas.restore(); //释放图层。

}

canvas.restore(); //释放图层。

}

复制代码

2.2:使用动画

这里用Stack进行组件的堆叠。

class _AbilityWidgetState extends State<AbilityWidget>。

with SingleTickerProviderStateMixin {。

var _angle = 0.0;。

AnimationController controller;。

Animation<double> animation;。

@override

void initState() {。

super.initState();。

controller = AnimationController(。

////创建 Animation对象。

duration: const Duration(milliseconds: 2000), //时长。

vsync: this);。

var tween = Tween(begin: 0.0, end: 360.0); //创建从25到150变化的Animatable对象。

animation = tween.animate(controller); //执行animate方法，生成。

animation.addListener(() {。

setState(() {。

_angle = animation.value;。

});

});

controller.forward();。

}

@override

Widget build(BuildContext context) {。

var paint = CustomPaint(。

painter: AbilityPainter(),。

);

var outlinePainter = Transform.rotate(。

angle: _angle / 180 * pi,。

child: CustomPaint(。

painter: OutlinePainter(),。

),

);

var img = Transform.rotate(。

angle: _angle / 180 * pi,。

child: Opacity(。

opacity: animation.value / 360 * 0.4,。

child: ClipOval(。

child: Image.asset(。

"images/娜美.jpg",。

width: 200,。

height: 200,。

fit: BoxFit.cover,。

),

),

),

);

var center = Transform.rotate(。

angle: -_angle / 180 * pi,。

child: Transform.scale(。

scale: 0.5 + animation.value / 360 / 2,。

child: SizedBox(。

width: 200,。

height: 200,。

child: paint,。

),

));

return Center(。

child: Stack(。

alignment: Alignment.center,。

children: <Widget>[img, center, outlinePainter],。

),

);

}

复制代码

3.组件封装

到现在逻辑上没有问题了，剩下的就是对组件的封装，将一些量进行提取。

下面就是简单封装了一下，还有很多乱七八糟的没封装,比如颜色，动画效果等。

import 'dart:math';。

import 'dart:ui' as ui;。

import 'package:flutter/material.dart';。

class Ability {。

double radius;。

int duration;。

ImageProvider image;。

Map<String,double> data;。

Color color;

Ability({this.radius, this.duration, this.image, this.data, this.color});。

class AbilityWidget extends StatefulWidget {。

AbilityWidget({Key key, this.ability}) : super(key: key);。

final Ability ability;。

@override

_AbilityWidgetState createState() => _AbilityWidgetState();。

class _AbilityWidgetState extends State<AbilityWidget>。

with SingleTickerProviderStateMixin {。

var _angle = 0.0;。

AnimationController controller;。

Animation<double> animation;。

@override

void initState() {。

super.initState();。

controller = AnimationController(。

////创建 Animation对象。

duration: Duration(milliseconds: widget.ability.duration), //时长。

vsync: this);。

var curveTween = CurveTween(curve:Cubic(0.96, 0.13, 0.1, 1.2));//创建curveTween。

var tween=Tween(begin: 0.0, end: 360.0);。

animation = tween.animate(curveTween.animate(controller));。

animation.addListener(() {。

setState(() {。

_angle = animation.value;。

print(_angle);。

});

});

controller.forward();。

}

@override

Widget build(BuildContext context) {。

var paint = CustomPaint(。

painter: AbilityPainter(widget.ability.radius,widget.ability.data),。

);

var outlinePainter = Transform.rotate(。

angle: _angle / 180 * pi,。

child: CustomPaint(。

painter: OutlinePainter(widget.ability.radius ),。

),

);

var img = Transform.rotate(。

angle: _angle / 180 * pi,。

child: Opacity(。

opacity: animation.value / 360 * 0.4,。

child: ClipRRect(。

borderRadius: BorderRadius.circular(widget.ability.radius),。

child: Image(。

image: widget.ability.image,。

width: widget.ability.radius * 2,。

height: widget.ability.radius * 2,。

fit: BoxFit.cover,。

),

),

),

);

var center = Transform.rotate(。

angle: -_angle / 180 * pi,。

child: Transform.scale(。

scale: 0.5 + animation.value / 360 / 2,。

child: SizedBox(。

width: widget.ability.radius * 2,。

height: widget.ability.radius * 2,。

child: paint,。

),

));

return Center(。

child: Stack(。

alignment: Alignment.center,。

children: <Widget>[img, center, outlinePainter],。

),

);

}

class OutlinePainter extends CustomPainter {。

double _radius; //外圆半径。

Paint mLinePaint; //线画笔。

Paint mFillPaint; //填充画笔。

OutlinePainter(this._radius) {。

mLinePaint = Paint()。

..color = Colors.black。

..style = PaintingStyle.stroke。

..strokeWidth = 0.008 * _radius。

..isAntiAlias = true;。

mFillPaint = Paint() //填充画笔。

..strokeWidth = 0.05 * _radius。

..color = Colors.black。

..isAntiAlias = true;。

}

@override

void paint(Canvas canvas, Size size) {。

drawOutCircle(canvas);。

}

@override

bool shouldRepaint(CustomPainter oldDelegate) {。

// TODO: implement shouldRepaint。

return true;。

}

//绘制外圈

void drawOutCircle(Canvas canvas) {。

canvas.save(); //新建图层。

canvas.drawCircle(Offset(0, 0), _radius, mLinePaint); //圆形的绘制。

double r2 = _radius - 0.08 * _radius; //下圆半径。

canvas.drawCircle(Offset(0, 0), r2, mLinePaint);。

for (var i = 0.0; i < 22; i++) {。

//循环画出小黑条。

canvas.save(); //新建图层。

canvas.rotate(360 / 22 * i / 180 * pi); //旋转:注意传入的是弧度（与Android不同）

canvas.drawLine(Offset(0, -_radius), Offset(0, -r2), mFillPaint); //线的绘制。

canvas.restore(); //释放图层。

}

canvas.restore(); //释放图层。

}

class AbilityPainter extends CustomPainter {。

Map<String, double> _data;。

double _r; //外圆半径。

Paint mLinePaint; //线画笔。

Paint mAbilityPaint; //区域画笔。

Paint mFillPaint; //填充画笔。

Path mLinePath; //短直线路径。

Path mAbilityPath; //范围路径。

AbilityPainter(this._r, this._data) {。

mLinePath = Path();。

mAbilityPath = Path();。

mLinePaint = Paint()。

..color = Colors.black。

..style = PaintingStyle.stroke。

..strokeWidth = 0.008 * _r。

..isAntiAlias = true;。

mFillPaint = Paint() //填充画笔。

..strokeWidth = 0.05 * _r。

..color = Colors.black。

..isAntiAlias = true;。

mAbilityPaint = Paint()。

..color = Color(0x8897C5FE)。

..isAntiAlias = true;。

}

@override

void paint(Canvas canvas, Size size) {。

//剪切画布

Rect rect = Offset.zero & size;。

canvas.clipRect(rect);。

canvas.translate(_r, _r); //移动坐标系。

drawInnerCircle(canvas);。

drawInfoText(canvas);。

drawAbility(canvas, _data.values.toList());。

}

@override

bool shouldRepaint(CustomPainter oldDelegate) {。

return true;。

}

//绘制内圈圆

drawInnerCircle(Canvas canvas) {。

double innerRadius = 0.618 * _r; //内圆半径。

canvas.drawCircle(Offset(0, 0), innerRadius, mLinePaint);。

canvas.save();。

for (var i = 0; i < _data.length; i++) {。

//遍历6条线

canvas.save();。

canvas.rotate(360/_data.length * i.toDouble() / 180 * pi); //每次旋转60°。

mLinePath.moveTo(0, -innerRadius);。

mLinePath.relativeLineTo(0, innerRadius); //线的路径。

for (int j = 1; j < _data.length; j++) {。

mLinePath.moveTo(-_r * 0.02, innerRadius / _data.length * j);。

mLinePath.relativeLineTo(_r * 0.02 * 2, 0);。

} //加5条小线。

canvas.drawPath(mLinePath, mLinePaint); //绘制线。

canvas.restore();。

}

canvas.restore();。

}

//绘制文字

void drawInfoText(Canvas canvas) {。

double r2 = _r - 0.08 * _r; //下圆半径。

for (int i = 0; i < _data.length; i++) {。

canvas.save();。

canvas.rotate(360 / _data.length * i / 180 * pi + pi);。

drawText(canvas, _data.keys.toList()[i], Offset(-50, r2 - 0.22 * _r),。

fontSize: _r * 0.1);。

canvas.restore();。

}

}

//绘制区域

drawAbility(Canvas canvas, List<double> value) {。

double step = _r * 0.618 / _data.length; //每小段的长度。

mAbilityPath.moveTo(0, -value[0] / (100/_data.length) * step); //起点。

for (int i = 1; i < _data.length; i++) {。

double mark = value[i] / (100/_data.length);。

var deg=pi/180*(360/_data.length * i - 90);。

mAbilityPath.lineTo(mark * step * cos(deg), mark * step * sin(deg));。

}

mAbilityPath.close();。

canvas.drawPath(mAbilityPath, mAbilityPaint);。

}

//绘制文字

drawText(Canvas canvas, String text, Offset offset,。

{Color color = Colors.black,。

double maxWith = 100,。

double fontSize,。

String fontFamily,。

TextAlign textAlign = TextAlign.center,。

FontWeight fontWeight = FontWeight.bold}) {。

// 绘制文字

var paragraphBuilder = ui.ParagraphBuilder(。

ui.ParagraphStyle(。

fontFamily: fontFamily,。

textAlign: textAlign,。

fontSize: fontSize,。

fontWeight: fontWeight,。

),

);

paragraphBuilder.pushStyle(。

ui.TextStyle(color: color, textBaseline: ui.TextBaseline.alphabetic));。

paragraphBuilder.addText(text);。

var paragraph = paragraphBuilder.build();。

paragraph.layout(ui.ParagraphConstraints(width: maxWith));。

canvas.drawParagraph(paragraph, Offset(offset.dx, offset.dy));。

}

}。

人际交往 心理学方面的书

链接：https://pan.baidu.com/s/1CluRI_3mlzONQ_vQ56Ka9w。

提取码：rt83人际交往2期：想跟任何人都聊得来？听这30本沟通书就够啦！荔枝微课百万人气讲师、学员眼中的“说书女先生”桂妃老师，精选了30本沟通书，其中包括应酬必备套路、蔡康永和《奇葩说》人气选手的说话之道、在不同场合下的说话方式、解决问题的高难度沟通术。

不管你是想改善自己的人际关系，还是和父母、夫妻的关系，或是想在事业一帆风顺，桂妃老师擅长以日常的生活案例解读沟通之道，轻松吸取30本书的精华内容，可以让你在45分钟内掌握聊天技巧。

课程目录：

《学会应酬，半生不愁》：超实用的中国式应酬秘笈。

《中国饭局潜规则》：帮你在饭局上运筹帷幄。

《关系是喝出来的》：中国式酒桌应酬智慧。

《中国式场面话大全》：教你听懂、会说场面话。

《蔡康永的说话之道》：如何跟别人更好的相处？

《好好说话》：奇葩说新鲜有趣的话术精进技巧。

.....

人际沟通技巧有几种？

书名：《社会心理学》，《身体语言密码》，《人格心理学》，《人际关系心理学》，《行为心理学》，《心理学与生活》。

《社会心理学》特点：

经典名著：本书主要作者阿伦森博士是美国心理学会（APA）120年历史上唯一一个包揽其三个主要奖项的人，本书作为教材版，同样是美国高校广泛使用的社会心理学教材。

贴近生活：书中各章节不是从概念出发，而是以真实发生在社会中的典型事例为出发点，引出各章的核心概念和主要内容。在结构设置上，本书从个体行为的心理学讲起，然后进展到团体行为的心理学，进而讲解人际间关系的心理学以及在环境、健康、法律等领域中社会心理学的具体应用，可以让读者全面掌握生活中的社会心理学。

人文关怀：由于阿伦森博士自己特殊的生活经历，他一直致力于使用心理学改善社会环境，这种人文关怀贯穿在全书之中，成为本书的一大特色。

《人格心理学》：

不是关于传统人格大理论的内容组织，而是关于设计人格功能六个重要领域的知识，这个框架，要着重解决的问题。这种结构令人耳目一新，代表了当代人格心理学体系建设的新趋势。

这六个知识领域揭示了人格的不同方面，分别是：特征领域（特征、特征分类和跨时间的人格特征）、生物学领域（生理学、遗传学和进化）、心理动机领域（心理动机、动机）。

认知经验领域（认知、情感和自我），社会和文化领域（社会互动、性别和文化）。）和调整领域（压力、应对、健康和人格障碍）。这本书有三个主要特点：一是强调人格的完整性。二是注重互联互通。三是制度创新。

扩展资料：

社会心理学是心理学的一个主要分支。它所研究的是和社会有关的心理学问题。所有的社会事情都有人的因素在里面，也就是都有心理的问题在里面。

研究这些课题的心理学就是社会心理学。在当代心理科学中，认知心理学和社会心理学最为人们重视，社会心理学从个体与社会相互作用的角度出发，研究特定社会生活条件下个体心理活动发生发展及其变化的规律。社会心理学不仅强调社会与个体之间的相互作用，重视关于社会情境的探讨，重视个体的内在心理因素。

社会心理学的研究范围涉及个体社会心理和社会行为，社会交往心理和行为，群体心理，以及应用社会心理学等层面，即理论与方法，社会个体，态度与行为，社会影响和社会心理学的应用等领域。

专业定位是以人文社会科学为导向的社会心理学，并坚持自然科学框架下融合人文社会科学基础的社会心理学研究思路。

参考资料来源：

百度百科-社会心理学

推荐几本人际交往的书

原文地址：http://www.qianchusai.com/interpersonal-30.html